@corva/ui 3.78.0-13 → 3.78.0-15

package/cjs-bundle/components/AssetsMultipleSelector/AssetsMultipleSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetsMultipleSelector.js","sources":["../../../../src/components/AssetsMultipleSelector/AssetsMultipleSelector.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport classnames from 'classnames';\nimport { makeStyles } from '@material-ui/core';\nimport { sortBy } from 'lodash';\n\nimport { Search } from '../Search';\n\nimport { mapAssetGetRequest } from '~/clients/jsonApi';\nimport { jsonaDataFormatter } from '~/utils';\nimport useLoadedData from '~/effects/useLoadedData';\n\nconst useStyles = makeStyles(theme => ({\n  listbox: {\n    maxHeight: 360,\n  },\n  paper: {\n    width: 364,\n  },\n  footer: {\n    fontSize: 12,\n    color: theme.palette.primary.text6,\n    lineHeight: '16.872px',\n    padding: '8px 16px',\n  },\n}));\n\nconst getDataFromResponseFn = (response: {\n  data: unknown;\n  headers?: { get(name: string): string | null };\n}) => {\n  return {\n    data: jsonaDataFormatter.deserialize(response.data as string) as Asset[],\n    total: Number(response.headers?.get('total')) || 0,\n  };\n};\nconst initialSelectedAssets: Asset[] = [];\nconst defaultQueryParams = {};\nconst DEFAULT_ASSETS_PER_PAGE = 50;\nconst initialData: { data: Asset[]; total: number } = { data: [], total: 0 };\n\ntype Asset = { id: string; name: string } & Record<string, unknown>;\nexport type AssetsMultipleSelectorProps = {\n  /**\n   array of asset objects with required id and name fields.\n   */\n  selectedAssets: [] | Asset[];\n  /**\n  callback fires on asset selection with array of all selected assets.\n  */\n  onChange: (assets: Asset[] | []) => void;\n  /**\n  label for autocomplete input.\n  */\n  label: string;\n  /**\n  type of asset.\n  */\n  type: 'program' | 'rig' | 'well' | 'frac_fleet' | 'drillout_unit' | 'pad' | 'assets';\n  /**\n   css for root component.\n  */\n  className?: string;\n  /**\n  custom query params for assets request like fields, per_page.\n  */\n  customRequestQueryParams?: Record<string, unknown> & {\n    fields?: string[];\n    per_page?: number | string;\n  };\n  /**\n  material ui autocomplete classes.\n  */\n  classes?: any;\n};\n\nconst AssetsMultipleSelector = memo(\n  ({\n    selectedAssets = initialSelectedAssets,\n    onChange,\n    label,\n    className,\n    type,\n    customRequestQueryParams,\n    classes = {},\n  }: AssetsMultipleSelectorProps) => {\n    const styles = useStyles();\n\n    const { isLoading, setIsLoading, data, loadData } = useLoadedData({\n      loadFn: mapAssetGetRequest(type, true),\n      initialData: initialData as any,\n      getDataFromResponseFn,\n      isCacheEnabled: true,\n    });\n    const { data: assetsData, total } = data ?? initialData;\n    const [searchValue, setSearchValue] = useState('');\n\n    useEffect(() => {\n      loadAssets('', customRequestQueryParams);\n    }, []);\n\n    const selectedOptions: AssetsMultipleSelectorProps['selectedAssets'] & {} = useMemo(\n      () =>\n        selectedAssets.map(asset => ({\n          ...asset,\n          id: asset.id,\n          label: asset.name,\n        })),\n      [selectedAssets]\n    );\n\n    const options: (Asset & { label: string })[] = useMemo(() => {\n      const optionsMap: Record<string, Asset & { label: string }> = {};\n      const allOptions = selectedOptions.length ? assetsData.concat(selectedOptions) : assetsData;\n      allOptions.forEach((asset: Asset) => {\n        optionsMap[asset.id] = {\n          ...asset,\n          id: asset.id,\n          label: asset.name,\n        };\n      });\n\n      return Object.values(sortBy(optionsMap, 'label'));\n    }, [assetsData, selectedAssets, searchValue]);\n\n    const loadAssets = useCallback(\n      (\n        search: string,\n        customRequestQueryParams: AssetsMultipleSelectorProps['customRequestQueryParams'] = {}\n      ) => {\n        const params = {\n          ...defaultQueryParams,\n          per_page: DEFAULT_ASSETS_PER_PAGE,\n          ...customRequestQueryParams,\n          fields: [`${type}.name`].concat(customRequestQueryParams?.fields || []),\n        };\n\n        loadData({\n          search,\n          ...params,\n        });\n      },\n      []\n    );\n\n    const handleChange = (_event: unknown, visibleSelectedOptions: Asset[], reason?: string) => {\n      if (reason === 'reset') return;\n\n      const newAssets = visibleSelectedOptions.map(option => {\n        return {\n          ...option,\n          name: option.label as string,\n        };\n      });\n\n      onChange(newAssets);\n    };\n\n    const onInputReset = () => {\n      setSearchValue('');\n      loadAssets('', customRequestQueryParams);\n    };\n\n    const handleInputChange = (value: string, reason: string) => {\n      if (reason === 'reset' || value === '') {\n        onInputReset();\n        return;\n      }\n\n      if (value.trimStart() !== searchValue) {\n        setSearchValue(value.trimStart());\n        setIsLoading(true);\n        loadAssets(value.trimStart(), customRequestQueryParams);\n      }\n    };\n\n    const countNotShowedAssets = () => {\n      const optionsCount = total - assetsData?.length;\n      if (optionsCount === 0) return null;\n\n      return optionsCount;\n    };\n\n    const paperFooter = useMemo(() => {\n      const notShowedAssetsQuantity = countNotShowedAssets();\n      return notShowedAssetsQuantity && !isLoading && searchValue ? (\n        <div className={styles.footer}>\n          {notShowedAssetsQuantity} additional items not displayed. Continue typing for more refined\n          results.\n        </div>\n      ) : null;\n    }, [assetsData, isLoading, !!searchValue, total]);\n\n    const { listbox, paper, ...restClasses } = classes;\n\n    return (\n      <Search\n        data-testid=\"offsetPadDropdown\"\n        value={selectedOptions}\n        onChange={handleChange}\n        TextFieldProps={{ label }}\n        // @ts-ignore\n        className={className}\n        classes={{\n          listbox: classnames(styles.listbox, listbox),\n          paper: classnames(styles.paper, paper),\n          ...restClasses,\n        }}\n        loading={isLoading}\n        options={options}\n        placeholder=\"\"\n        multiple\n        filterSelectedOptions={false}\n        AutocompleteProps={{ forcePopupIcon: true }}\n        isHiddenAllOption\n        onInputChangeCallback={handleInputChange}\n        onInputReset={onInputReset}\n        paperFooter={paperFooter}\n        getOptionSelected={(option, value) => +option.id === +value.id}\n        isPrioritizedSelectedOptions\n      />\n    );\n  }\n);\n\nexport default AssetsMultipleSelector;\n"],"names":["useStyles","makeStyles","theme","listbox","maxHeight","paper","width","footer","fontSize","color","palette","primary","text6","lineHeight","padding","getDataFromResponseFn","response","_response$headers","data","jsonaDataFormatter","deserialize","total","Number","headers","get","initialSelectedAssets","defaultQueryParams","initialData","AssetsMultipleSelector","memo","_ref","_ref$selectedAssets","selectedAssets","onChange","label","className","type","customRequestQueryParams","_ref$classes","classes","styles","_useLoadedData","useLoadedData","loadFn","mapAssetGetRequest","isCacheEnabled","isLoading","setIsLoading","loadData","_ref2","assetsData","useState","_useState2","_slicedToArray","_useState","searchValue","setSearchValue","useEffect","loadAssets","selectedOptions","useMemo","map","asset","_objectSpread","id","name","options","optionsMap","length","concat","forEach","Object","values","sortBy","useCallback","search","arguments","undefined","params","per_page","fields","onInputReset","paperFooter","optionsCount","notShowedAssetsQuantity","_jsxs","children","restClasses","_excluded","_jsx","Search","value","_event","visibleSelectedOptions","reason","newAssets","option","TextFieldProps","classnames","loading","placeholder","multiple","filterSelectedOptions","AutocompleteProps","forcePopupIcon","isHiddenAllOption","onInputChangeCallback","trimStart","getOptionSelected","isPrioritizedSelectedOptions"],"mappings":"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"}
+{"version":3,"file":"AssetsMultipleSelector.js","sources":["../../../../src/components/AssetsMultipleSelector/AssetsMultipleSelector.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport classnames from 'classnames';\nimport { makeStyles } from '@material-ui/core';\nimport { sortBy } from 'lodash';\n\nimport { Search } from '../Search';\n\nimport { mapAssetGetRequest } from '~/clients/jsonApi';\nimport { jsonaDataFormatter } from '~/utils';\nimport useLoadedData from '~/effects/useLoadedData';\n\nconst useStyles = makeStyles(theme => ({\n  listbox: {\n    maxHeight: 360,\n  },\n  paper: {\n    width: 364,\n  },\n  footer: {\n    fontSize: 12,\n    color: theme.palette.primary.text6,\n    lineHeight: '16.872px',\n    padding: '8px 16px',\n  },\n}));\n\nconst getDataFromResponseFn = (response: {\n  data: unknown;\n  headers?: { get(name: string): string | null };\n}) => {\n  return {\n    data: jsonaDataFormatter.deserialize(response.data as string) as Asset[],\n    total: Number(response.headers?.get('total')) || 0,\n  };\n};\nconst initialSelectedAssets: Asset[] = [];\nconst defaultQueryParams = {};\nconst DEFAULT_ASSETS_PER_PAGE = 50;\nconst initialData: { data: Asset[]; total: number } = { data: [], total: 0 };\n\ntype Asset = { id: string; name: string } & Record<string, unknown>;\nexport type AssetsMultipleSelectorProps = {\n  /**\n   array of asset objects with required id and name fields.\n   */\n  selectedAssets: [] | Asset[];\n  /**\n  callback fires on asset selection with array of all selected assets.\n  */\n  onChange: (assets: Asset[] | []) => void;\n  /**\n  label for autocomplete input.\n  */\n  label: string;\n  /**\n  type of asset.\n  */\n  type: 'program' | 'rig' | 'well' | 'frac_fleet' | 'drillout_unit' | 'pad' | 'assets';\n  /**\n   css for root component.\n  */\n  className?: string;\n  /**\n  custom query params for assets request like fields, per_page.\n  */\n  customRequestQueryParams?: Record<string, unknown> & {\n    fields?: string[];\n    per_page?: number | string;\n  };\n  /**\n  material ui autocomplete classes.\n  */\n  classes?: any;\n};\n\nconst AssetsMultipleSelector = memo(\n  ({\n    selectedAssets = initialSelectedAssets,\n    onChange,\n    label,\n    className,\n    type,\n    customRequestQueryParams,\n    classes = {},\n  }: AssetsMultipleSelectorProps) => {\n    const styles = useStyles();\n\n    const { isLoading, setIsLoading, data, loadData } = useLoadedData({\n      loadFn: mapAssetGetRequest(type, true),\n      initialData: initialData as any,\n      getDataFromResponseFn,\n      isCacheEnabled: true,\n    });\n    const { data: assetsData, total } = data ?? initialData;\n    const [searchValue, setSearchValue] = useState('');\n\n    useEffect(() => {\n      loadAssets('', customRequestQueryParams);\n    }, []);\n\n    const selectedOptions: AssetsMultipleSelectorProps['selectedAssets'] & {} = useMemo(\n      () =>\n        selectedAssets.map(asset => ({\n          ...asset,\n          id: asset.id,\n          label: asset.name,\n        })),\n      [selectedAssets]\n    );\n\n    const options: (Asset & { label: string })[] = useMemo(() => {\n      const optionsMap: Record<string, Asset & { label: string }> = {};\n      const allOptions = selectedOptions.length ? assetsData.concat(selectedOptions) : assetsData;\n      allOptions.forEach((asset: Asset) => {\n        optionsMap[asset.id] = {\n          ...asset,\n          id: asset.id,\n          label: asset.name,\n        };\n      });\n\n      return Object.values(sortBy(optionsMap, 'label'));\n    }, [assetsData, selectedAssets, searchValue]);\n\n    const loadAssets = useCallback(\n      (\n        search: string,\n        customRequestQueryParams: AssetsMultipleSelectorProps['customRequestQueryParams'] = {}\n      ) => {\n        const params = {\n          ...defaultQueryParams,\n          per_page: DEFAULT_ASSETS_PER_PAGE,\n          ...customRequestQueryParams,\n          fields: [`${type}.name`].concat(customRequestQueryParams?.fields || []),\n        };\n\n        loadData({\n          search,\n          ...params,\n        });\n      },\n      []\n    );\n\n    const handleChange = (_event: unknown, visibleSelectedOptions: Asset[], reason?: string) => {\n      if (reason === 'reset') return;\n\n      const newAssets = visibleSelectedOptions.map(option => {\n        return {\n          ...option,\n          name: option.label as string,\n        };\n      });\n\n      onChange(newAssets);\n    };\n\n    const onInputReset = () => {\n      setSearchValue('');\n      loadAssets('', customRequestQueryParams);\n    };\n\n    const handleInputChange = (value: string, reason: string) => {\n      if (reason === 'reset' || value === '') {\n        onInputReset();\n        return;\n      }\n\n      if (value.trimStart() !== searchValue) {\n        setSearchValue(value.trimStart());\n        setIsLoading(true);\n        loadAssets(value.trimStart(), customRequestQueryParams);\n      }\n    };\n\n    const countNotShowedAssets = () => {\n      const optionsCount = total - assetsData?.length;\n      if (optionsCount === 0) return null;\n\n      return optionsCount;\n    };\n\n    const paperFooter = useMemo(() => {\n      const notShowedAssetsQuantity = countNotShowedAssets();\n      return notShowedAssetsQuantity && !isLoading && searchValue ? (\n        <div className={styles.footer}>\n          {notShowedAssetsQuantity} additional items not displayed. Continue typing for more refined\n          results.\n        </div>\n      ) : null;\n    }, [assetsData, isLoading, !!searchValue, total]);\n\n    const { listbox, paper, ...restClasses } = classes;\n\n    return (\n      <Search\n        data-testid=\"offsetPadDropdown\"\n        value={selectedOptions}\n        onChange={handleChange}\n        TextFieldProps={{ label }}\n        className={className}\n        classes={{\n          listbox: classnames(styles.listbox, listbox),\n          paper: classnames(styles.paper, paper),\n          ...restClasses,\n        }}\n        loading={isLoading}\n        options={options}\n        placeholder=\"\"\n        multiple\n        filterSelectedOptions={false}\n        AutocompleteProps={{ forcePopupIcon: true }}\n        isHiddenAllOption\n        onInputChangeCallback={handleInputChange}\n        onInputReset={onInputReset}\n        paperFooter={paperFooter}\n        getOptionSelected={(option, value) => +option.id === +value.id}\n        isPrioritizedSelectedOptions\n      />\n    );\n  }\n);\n\nexport default AssetsMultipleSelector;\n"],"names":["useStyles","makeStyles","theme","listbox","maxHeight","paper","width","footer","fontSize","color","palette","primary","text6","lineHeight","padding","getDataFromResponseFn","response","_response$headers","data","jsonaDataFormatter","deserialize","total","Number","headers","get","initialSelectedAssets","defaultQueryParams","initialData","AssetsMultipleSelector","memo","_ref","_ref$selectedAssets","selectedAssets","onChange","label","className","type","customRequestQueryParams","_ref$classes","classes","styles","_useLoadedData","useLoadedData","loadFn","mapAssetGetRequest","isCacheEnabled","isLoading","setIsLoading","loadData","_ref2","assetsData","useState","_useState2","_slicedToArray","_useState","searchValue","setSearchValue","useEffect","loadAssets","selectedOptions","useMemo","map","asset","_objectSpread","id","name","options","optionsMap","length","concat","forEach","Object","values","sortBy","useCallback","search","arguments","undefined","params","per_page","fields","onInputReset","paperFooter","optionsCount","notShowedAssetsQuantity","_jsxs","children","restClasses","_excluded","_jsx","Search","value","_event","visibleSelectedOptions","reason","newAssets","option","TextFieldProps","classnames","loading","placeholder","multiple","filterSelectedOptions","AutocompleteProps","forcePopupIcon","isHiddenAllOption","onInputChangeCallback","trimStart","getOptionSelected","isPrioritizedSelectedOptions"],"mappings":"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"}

package/cjs-bundle/componentsV2/ColorPicker/ColorPicker.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),o=require("@babel/runtime/helpers/defineProperty"),s=require("classnames"),n=require("react"),c=require("react-color"),i=require("lodash"),r=require("uuid"),t=require("../TextInputNext/TextInputNext.js"),u=require("../Popover/Popover.js"),a=require("../ButtonIcon/ButtonIcon.js"),l=require("../Tooltip/Tooltip.js"),m=require("../Popper/Popper.js"),d=require("./Swatches/Swatches.js"),p=require("./utils.js"),j=require("./OpacityDragtracker/OpacityDragtracker.js"),q=require("./useChromePickerAccessibility.js"),f=require("./ColorPicker.scss.js"),I=require("../../icons/iconParkIcons.js");require("../../icons/customIcons/icons/AddMessage.js"),require("../../icons/customIcons/icons/DragOne.js"),require("../../icons/customIcons/icons/Attention.js"),require("../../icons/customIcons/icons/Collapse.js"),require("../../icons/customIcons/icons/Dashboard.js"),require("../../icons/customIcons/icons/Expand.js"),require("../../icons/customIcons/icons/FolderClosed.js"),require("../../icons/customIcons/icons/FolderClosedFilled.js"),require("../../icons/customIcons/icons/FolderOpened.js"),require("../../icons/customIcons/icons/GreaterOrEqual.js"),require("../../icons/customIcons/icons/LessOrEqual.js"),require("../../icons/customIcons/icons/Search.js"),require("../../icons/customIcons/icons/SearchOne.js"),require("../../icons/customIcons/icons/Wellhub.js"),require("../../icons/customIcons/icons/MultiRuler.js"),require("../../icons/customIcons/icons/Checkbox.js"),require("../../icons/customIcons/icons/CheckboxChecked.js"),require("../../icons/customIcons/icons/CheckboxIndeterminate.js"),require("../../icons/customIcons/icons/Radio.js"),require("../../icons/customIcons/icons/RadioChecked.js"),require("../../icons/customIcons/icons/SimulFrac.js"),require("../../icons/customIcons/icons/ZipperFrac.js"),require("../../icons/customIcons/icons/CautionFilled.js"),require("../../icons/customIcons/icons/InfoRounded.js"),require("../../icons/customIcons/icons/FlameFilled.js"),require("../../icons/customIcons/icons/MoreApp.js"),require("../../icons/customIcons/icons/Pad.js"),require("../../icons/customIcons/icons/DrilloutUnit.js"),require("../../icons/customIcons/icons/FracFleet.js"),require("../../icons/customIcons/icons/Global.js"),require("../../icons/customIcons/icons/Program.js"),require("../../icons/customIcons/icons/Rig.js"),require("../../icons/customIcons/icons/Well.js"),require("../../icons/customIcons/icons/Gap.js"),require("../../icons/customIcons/icons/Pin.js"),require("../../icons/customIcons/icons/PinOne.js"),require("../../icons/customIcons/icons/PinOneCrossed.js"),require("../../icons/customIcons/icons/CloseOneFilled.js"),require("../../icons/customIcons/icons/AttentionFilled.js"),require("../../icons/customIcons/icons/CheckOneFilled.js"),require("../../icons/customIcons/icons/Archive.js"),require("../../icons/customIcons/icons/ArchiveCancel.js"),require("../../icons/customIcons/icons/Unarchive.js"),require("../../icons/customIcons/icons/Archived.js"),require("../../icons/customIcons/icons/InterventionUnit.js"),require("../../icons/customIcons/icons/CloudDelete.js"),require("../../icons/customIcons/icons/Lasso.js"),require("../../icons/customIcons/icons/Radius.js"),require("../../icons/customIcons/icons/ErrorOps.js"),require("../../icons/customIcons/icons/DataTypeOps.js"),require("../../icons/customIcons/icons/FalsePositiveOps.js"),require("../../icons/customIcons/icons/CalibrationOps.js"),require("../../icons/customIcons/icons/CriticalOps.js"),require("../../icons/customIcons/icons/Company.js"),require("../../icons/customIcons/icons/ArchiveOne.js"),require("../../icons/customIcons/icons/ParseBotFusion.js"),require("../../icons/customIcons/icons/Connect.js"),require("../../icons/customIcons/icons/PuzzleOne.js"),require("../../icons/customIcons/icons/Feed.js"),require("../../icons/customIcons/icons/Prompt.js"),require("../../icons/customIcons/icons/Companies.js"),require("../../icons/customIcons/icons/ClipboardAi.js"),require("../../icons/customIcons/icons/Key.js"),require("../../icons/customIcons/icons/AtSignCrossed.js"),require("../../icons/customIcons/icons/MappingManual.js"),require("../../icons/customIcons/icons/Mapping.js"),require("../../icons/customIcons/icons/Metrics.js"),require("../../icons/customIcons/icons/Drops.js"),require("../../icons/customIcons/icons/ClipboardSearch.js"),require("../../icons/customIcons/icons/Template.js"),require("../../icons/customIcons/icons/ClipboardMetrics.js"),require("../../icons/customIcons/icons/ClipboardBuilder.js"),require("../../icons/customIcons/icons/UnitConversion.js"),require("../../icons/customIcons/icons/NPT.js"),require("../../icons/customIcons/icons/GuidedFrac.js");var b=require("react/jsx-runtime");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=h(e),C=h(o),k=h(s);function x(e,o){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);o&&(n=n.filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable}))),s.push.apply(s,n)}return s}function y(e){for(var o=1;o<arguments.length;o++){var s=null!=arguments[o]?arguments[o]:{};o%2?x(Object(s),!0).forEach((function(o){C.default(e,o,s[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):x(Object(s)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(s,o))}))}return e}var g={small:f.small,medium:f.medium,large:f.large};exports.ColorPicker=function(e){var o=e.format,s=void 0===o?"hex":o,h=e.className,C=e.label,x=e.labelPlacement,O=void 0===x?"top":x,P=e.popoverPlacement,D=void 0===P?"bottom-start":P,F=e.testId,N=e.disabled,S=e.size,T=void 0===S?"small":S,A=e.onOpen,w=e.onClose,M=e.value,E=void 0===M?p.defaultColor:M,R=e.onChange,B=e.disableOpacityDrag,z=e.enableAlpha,W=void 0!==z&&z,L=e.elementsClassNames,G=void 0===L?{}:L,K=n.useMemo((function(){return{input:k.default(f.input,G.input),inputContainer:k.default(f.inputContainer,G.inputContainer),label:k.default(f.label,G.label),prefix:f.prefixContainer,suffix:f.suffixContainer,numberStepButtons:f.numberStepButtons}}),[G.input,G.inputContainer,G.label]),U=n.useMemo((function(){try{var e=p.parseColor(E);return y(y({},e),{},{a:W?e.a:1})}catch(e){return p.parseColor(p.defaultColor)}}),[E,W]),H=n.useState(!1),V=v.default(H,2),_=V[0],Z=V[1],J=n.useRef(null),Q=n.useRef(null),X=n.useState(!0),Y=v.default(X,2),$=Y[0],ee=Y[1],oe=n.useState(null),se=v.default(oe,2),ne=se[0],ce=se[1],ie=n.useState(U),re=v.default(ie,2),te=re[0],ue=re[1],ae=n.useRef(null),le=n.useMemo((function(){return"corva-color-picker-".concat(r.v4())}),[]),me="".concat(le,"-opacity-input"),de="".concat(le,"-label"),pe="".concat(le,"-opacity-label"),je=Boolean(C),qe=n.useCallback((function(){Z(!0),null==A||A()}),[A]),fe=n.useCallback((function(e){e.preventDefault(),ce(null),qe()}),[qe]),Ie=n.useCallback((function(){ce(null),qe()}),[qe]),be=n.useCallback((function(e){N||"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),ce("palette"),qe())}),[N,qe]),he=n.useCallback((function(){var e,o,s=!(null===(e=ae.current)||void 0===e||!e.contains(document.activeElement));(ce(null),Z(!1),null==w||w(),s)&&(null===(o=Q.current)||void 0===o||o.focus({preventScroll:!0}))}),[w]),ve=n.useCallback((function(e){ce(0===e.detail?"palette":null),ee(!0)}),[]),Ce=n.useCallback((function(e){ce(0===e.detail?"picker":null),ee(!1)}),[]),ke=n.useCallback((function(){return ce(null)}),[]),xe=n.useCallback((function(e){return ue(e.rgb)}),[]),ye=n.useCallback((function(e){var o="hex"===s?p.channelsToHex(e,W):p.channelsToRgba(e,W);null==R||R(o)}),[s,R,W]),ge=n.useCallback((function(e){ue(e),ye(e)}),[ye]),Oe=q.useChromePickerAccessibility({color:te,enableAlpha:W,isActive:!$,onChange:ge}),Pe=Oe.pickerRef,De=Oe.onKeyDown;n.useEffect((function(){var e;if("picker"===ne&&!$){var o=null===(e=Pe.current)||void 0===e?void 0:e.querySelector('[data-color-picker-control="saturation"]');o&&(o.focus({preventScroll:!0}),ke())}}),[ke,ne,$,Pe]);var Fe=n.useCallback((function(e){var o=Number(e);if(!(Number.isNaN(o)||o<0||o>100)){var s=y(y({},U),{},{a:o/100});ye(s)}}),[U,ye]),Ne=n.useCallback((function(e){ye(e.rgb)}),[ye]),Se=n.useCallback((function(e){var o=U.a||1,s=W&&0===e.a?0:o;ye(y(y({},e),{},{a:s}))}),[ye,U.a,W]),Te=n.useCallback((function(){setTimeout((function(){var e,o;Z(!1),null===(e=document.activeElement)||void 0===e||null===(o=e.blur)||void 0===o||o.call(e)}),0)}),[]),Ae=n.useMemo((function(){return i.throttle((function(e){var o=String(Math.round(e));Fe(o)}),100)}),[Fe]);n.useEffect((function(){ue(U)}),[U]),n.useEffect((function(){_&&ee(!0)}),[_]);var we=String(Math.round(100*te.a)),Me=(null==D?void 0:D.startsWith("top"))||(null==D?void 0:D.startsWith("bottom")),Ee=(null==D?void 0:D.startsWith("left"))||(null==D?void 0:D.startsWith("right")),Re=je?b.jsxs(b.Fragment,{children:[b.jsx("label",{id:de,htmlFor:me,children:"string"==typeof C?b.jsx(t.TextInputNext.Label,{children:C}):C}),b.jsx("span",{id:pe,hidden:!0,children:"Opacity"})]}):void 0,Be=n.useMemo((function(){return je?{id:me,"aria-labelledby":"".concat(de," ").concat(pe)}:{id:me,"aria-label":"Opacity"}}),[je,me,de,pe]);return b.jsxs(b.Fragment,{children:[b.jsx(t.TextInputNext,{label:Re,labelPlacement:O,disabled:N,size:T,rootTagName:"div",prefix:b.jsxs(b.Fragment,{children:[b.jsxs("div",{className:f.fakeValue,children:[we,b.jsx("span",{className:f.fakeValuePercent,children:"%"})]}),b.jsx("div",{ref:Q,className:k.default(f.indicator,0===te.a&&f.transparent,G.indicator),style:{"--corvaui-colorpicker-indicatorcolor":p.channelsToHex(te,!1)},onClick:N?void 0:fe,onKeyDown:be,role:"button","aria-label":je?void 0:"Color picker","aria-labelledby":je?de:void 0,"aria-expanded":_,"aria-disabled":N,tabIndex:N?-1:0})]}),suffix:!_&&W&&!B&&!N&&b.jsx(j.OpacityDragTracker,{value:Number(we),onDrag:Ae,onDragEnd:Te}),className:k.default(f.root,g[T],!W&&f.noAlpha,h),testId:F,inputContainerRef:J,value:we,onChange:Fe,onFocus:Ie,inputType:"number",inputMode:"numeric",htmlAttributes:Be,elementsClassNames:K}),b.jsxs(u.Popover,{ref:ae,anchorEl:J.current,open:_,onClose:he,placement:D,className:k.default(f.popover,Me&&f.marginVertical,Ee&&f.marginHorizontal,0===te.a&&f.isTransparent,G.popover),children:[$?b.jsx(d.Swatches,{onChange:Se,value:U,addTransparent:W,autoFocus:"palette"===ne,onAutoFocus:ke}):b.jsx("div",{ref:Pe,className:f.pickerContainer,onKeyDown:De,children:b.jsx(c.ChromePicker,{color:te,onChange:xe,onChangeComplete:Ne,disableAlpha:!W,className:f.picker})}),b.jsxs("div",{className:f.switchButtons,children:[b.jsx(l.Tooltip,{title:"Palette",children:b.jsx(a.ButtonIcon,{ariaLabel:"Show color palette",size:"medium",type:$?"secondary":"tertiary",onClick:ve,children:b.jsx(I.PaletteIcon,{})})}),b.jsx(l.Tooltip,{title:"Pick your own",children:b.jsx(a.ButtonIcon,{ariaLabel:"Show custom color picker",size:"medium",type:$?"tertiary":"secondary",onClick:Ce,children:b.jsx(I.PickerIcon,{})})})]})]}),_&&W&&!B&&b.jsx(m.Popper,{open:_,anchorEl:J.current,className:f.dragTrackerPopper,placement:"right",children:b.jsx(j.OpacityDragTracker,{onDrag:Ae,onDragEnd:Te})})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),o=require("@babel/runtime/helpers/defineProperty"),s=require("classnames"),n=require("react"),c=require("react-color"),r=require("lodash"),i=require("uuid"),t=require("../TextInputNext/TextInputNext.js"),u=require("../Popover/Popover.js"),a=require("../ButtonIcon/ButtonIcon.js"),l=require("../Tooltip/Tooltip.js"),m=require("../Popper/Popper.js"),d=require("./Swatches/Swatches.js"),p=require("./utils.js"),j=require("./OpacityDragtracker/OpacityDragtracker.js"),q=require("./useChromePickerAccessibility.js"),f=require("./ColorPicker.scss.js"),I=require("../../icons/iconParkIcons.js");require("../../icons/customIcons/icons/AddMessage.js"),require("../../icons/customIcons/icons/DragOne.js"),require("../../icons/customIcons/icons/Attention.js"),require("../../icons/customIcons/icons/Collapse.js"),require("../../icons/customIcons/icons/Dashboard.js"),require("../../icons/customIcons/icons/Expand.js"),require("../../icons/customIcons/icons/FolderClosed.js"),require("../../icons/customIcons/icons/FolderClosedFilled.js"),require("../../icons/customIcons/icons/FolderOpened.js"),require("../../icons/customIcons/icons/GreaterOrEqual.js"),require("../../icons/customIcons/icons/LessOrEqual.js"),require("../../icons/customIcons/icons/Search.js"),require("../../icons/customIcons/icons/SearchOne.js"),require("../../icons/customIcons/icons/Wellhub.js"),require("../../icons/customIcons/icons/MultiRuler.js"),require("../../icons/customIcons/icons/Checkbox.js"),require("../../icons/customIcons/icons/CheckboxChecked.js"),require("../../icons/customIcons/icons/CheckboxIndeterminate.js"),require("../../icons/customIcons/icons/Radio.js"),require("../../icons/customIcons/icons/RadioChecked.js"),require("../../icons/customIcons/icons/SimulFrac.js"),require("../../icons/customIcons/icons/ZipperFrac.js"),require("../../icons/customIcons/icons/CautionFilled.js"),require("../../icons/customIcons/icons/InfoRounded.js"),require("../../icons/customIcons/icons/FlameFilled.js"),require("../../icons/customIcons/icons/MoreApp.js"),require("../../icons/customIcons/icons/Pad.js"),require("../../icons/customIcons/icons/DrilloutUnit.js"),require("../../icons/customIcons/icons/FracFleet.js"),require("../../icons/customIcons/icons/Global.js"),require("../../icons/customIcons/icons/Program.js"),require("../../icons/customIcons/icons/Rig.js"),require("../../icons/customIcons/icons/Well.js"),require("../../icons/customIcons/icons/Gap.js"),require("../../icons/customIcons/icons/Pin.js"),require("../../icons/customIcons/icons/PinOne.js"),require("../../icons/customIcons/icons/PinOneCrossed.js"),require("../../icons/customIcons/icons/CloseOneFilled.js"),require("../../icons/customIcons/icons/AttentionFilled.js"),require("../../icons/customIcons/icons/CheckOneFilled.js"),require("../../icons/customIcons/icons/Archive.js"),require("../../icons/customIcons/icons/ArchiveCancel.js"),require("../../icons/customIcons/icons/Unarchive.js"),require("../../icons/customIcons/icons/Archived.js"),require("../../icons/customIcons/icons/InterventionUnit.js"),require("../../icons/customIcons/icons/CloudDelete.js"),require("../../icons/customIcons/icons/Lasso.js"),require("../../icons/customIcons/icons/Radius.js"),require("../../icons/customIcons/icons/ErrorOps.js"),require("../../icons/customIcons/icons/DataTypeOps.js"),require("../../icons/customIcons/icons/FalsePositiveOps.js"),require("../../icons/customIcons/icons/CalibrationOps.js"),require("../../icons/customIcons/icons/CriticalOps.js"),require("../../icons/customIcons/icons/Company.js"),require("../../icons/customIcons/icons/ArchiveOne.js"),require("../../icons/customIcons/icons/ParseBotFusion.js"),require("../../icons/customIcons/icons/Connect.js"),require("../../icons/customIcons/icons/PuzzleOne.js"),require("../../icons/customIcons/icons/Feed.js"),require("../../icons/customIcons/icons/Prompt.js"),require("../../icons/customIcons/icons/Companies.js"),require("../../icons/customIcons/icons/ClipboardAi.js"),require("../../icons/customIcons/icons/Key.js"),require("../../icons/customIcons/icons/AtSignCrossed.js"),require("../../icons/customIcons/icons/MappingManual.js"),require("../../icons/customIcons/icons/Mapping.js"),require("../../icons/customIcons/icons/Metrics.js"),require("../../icons/customIcons/icons/Drops.js"),require("../../icons/customIcons/icons/ClipboardSearch.js"),require("../../icons/customIcons/icons/Template.js"),require("../../icons/customIcons/icons/ClipboardMetrics.js"),require("../../icons/customIcons/icons/ClipboardBuilder.js"),require("../../icons/customIcons/icons/UnitConversion.js"),require("../../icons/customIcons/icons/NPT.js"),require("../../icons/customIcons/icons/GuidedFrac.js");var b=require("react/jsx-runtime");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=h(e),C=h(o),k=h(s);function x(e,o){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);o&&(n=n.filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable}))),s.push.apply(s,n)}return s}function y(e){for(var o=1;o<arguments.length;o++){var s=null!=arguments[o]?arguments[o]:{};o%2?x(Object(s),!0).forEach((function(o){C.default(e,o,s[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):x(Object(s)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(s,o))}))}return e}var g={small:f.small,medium:f.medium,large:f.large},O={inputContainer:f.inputContainer,numberStepButtons:f.numberStepButtons,prefix:f.prefixContainer,suffix:f.suffixContainer,input:f.input,label:f.label};exports.ColorPicker=function(e){var o=e.format,s=void 0===o?"hex":o,h=e.className,x=e.label,P=e.labelPlacement,D=void 0===P?"top":P,F=e.popoverPlacement,N=void 0===F?"bottom-start":F,S=e.testId,T=e.disabled,A=e.size,w=void 0===A?"small":A,M=e.onOpen,E=e.onClose,R=e.value,B=void 0===R?p.defaultColor:R,z=e.onChange,W=e.disableOpacityDrag,L=e.enableAlpha,G=void 0!==L&&L,K=e.elementsClassNames,U=n.useMemo((function(){try{var e=p.parseColor(B);return y(y({},e),{},{a:G?e.a:1})}catch(e){return p.parseColor(p.defaultColor)}}),[B,G]),H=n.useMemo((function(){return K?Object.entries(K).reduce((function(e,o){var s=o,n=v.default(s,2),c=n[0],r=n[1];return y(y({},e),{},C.default({},c,e[c]?k.default(e[c],r):r))}),y({},O)):O}),[K]),V=n.useState(!1),_=v.default(V,2),Z=_[0],J=_[1],Q=n.useRef(null),X=n.useRef(null),Y=n.useState(!0),$=v.default(Y,2),ee=$[0],oe=$[1],se=n.useState(null),ne=v.default(se,2),ce=ne[0],re=ne[1],ie=n.useState(U),te=v.default(ie,2),ue=te[0],ae=te[1],le=n.useRef(null),me=n.useMemo((function(){return"corva-color-picker-".concat(i.v4())}),[]),de="".concat(me,"-opacity-input"),pe="".concat(me,"-label"),je="".concat(me,"-opacity-label"),qe=Boolean(x),fe=n.useCallback((function(){J(!0),null==M||M()}),[M]),Ie=n.useCallback((function(e){e.preventDefault(),re(null),fe()}),[fe]),be=n.useCallback((function(){re(null),fe()}),[fe]),he=n.useCallback((function(e){T||"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),re("palette"),fe())}),[T,fe]),ve=n.useCallback((function(){var e,o,s=!(null===(e=le.current)||void 0===e||!e.contains(document.activeElement));(re(null),J(!1),null==E||E(),s)&&(null===(o=X.current)||void 0===o||o.focus({preventScroll:!0}))}),[E]),Ce=n.useCallback((function(e){re(0===e.detail?"palette":null),oe(!0)}),[]),ke=n.useCallback((function(e){re(0===e.detail?"picker":null),oe(!1)}),[]),xe=n.useCallback((function(){return re(null)}),[]),ye=n.useCallback((function(e){return ae(e.rgb)}),[]),ge=n.useCallback((function(e){var o="hex"===s?p.channelsToHex(e,G):p.channelsToRgba(e,G);null==z||z(o)}),[s,z,G]),Oe=n.useCallback((function(e){ae(e),ge(e)}),[ge]),Pe=q.useChromePickerAccessibility({color:ue,enableAlpha:G,isActive:!ee,onChange:Oe}),De=Pe.pickerRef,Fe=Pe.onKeyDown;n.useEffect((function(){var e;if("picker"===ce&&!ee){var o=null===(e=De.current)||void 0===e?void 0:e.querySelector('[data-color-picker-control="saturation"]');o&&(o.focus({preventScroll:!0}),xe())}}),[xe,ce,ee,De]);var Ne=n.useCallback((function(e){var o=Number(e);if(!(Number.isNaN(o)||o<0||o>100)){var s=y(y({},U),{},{a:o/100});ge(s)}}),[U,ge]),Se=n.useCallback((function(e){ge(e.rgb)}),[ge]),Te=n.useCallback((function(e){var o=U.a||1,s=G&&0===e.a?0:o;ge(y(y({},e),{},{a:s}))}),[ge,U.a,G]),Ae=n.useCallback((function(){setTimeout((function(){var e,o;J(!1),null===(e=document.activeElement)||void 0===e||null===(o=e.blur)||void 0===o||o.call(e)}),0)}),[]),we=n.useMemo((function(){return r.throttle((function(e){var o=String(Math.round(e));Ne(o)}),100)}),[Ne]);n.useEffect((function(){ae(U)}),[U]),n.useEffect((function(){Z&&oe(!0)}),[Z]);var Me=String(Math.round(100*ue.a)),Ee=(null==N?void 0:N.startsWith("top"))||(null==N?void 0:N.startsWith("bottom")),Re=(null==N?void 0:N.startsWith("left"))||(null==N?void 0:N.startsWith("right")),Be=qe?b.jsxs(b.Fragment,{children:[b.jsx("label",{id:pe,htmlFor:de,children:"string"==typeof x?b.jsx(t.TextInputNext.Label,{children:x}):x}),b.jsx("span",{id:je,hidden:!0,children:"Opacity"})]}):void 0,ze=n.useMemo((function(){return qe?{id:de,"aria-labelledby":"".concat(pe," ").concat(je)}:{id:de,"aria-label":"Opacity"}}),[qe,de,pe,je]);return b.jsxs(b.Fragment,{children:[b.jsx(t.TextInputNext,{label:Be,labelPlacement:D,disabled:T,size:w,rootTagName:"div",prefix:b.jsxs(b.Fragment,{children:[b.jsxs("div",{className:f.fakeValue,children:[Me,b.jsx("span",{className:f.fakeValuePercent,children:"%"})]}),b.jsx("div",{ref:X,className:k.default(f.indicator,0===ue.a&&f.transparent,H.indicator),style:{"--corvaui-colorpicker-indicatorcolor":p.channelsToHex(ue,!1)},onClick:T?void 0:Ie,onKeyDown:he,role:"button","aria-label":qe?void 0:"Color picker","aria-labelledby":qe?pe:void 0,"aria-expanded":Z,"aria-disabled":T,tabIndex:T?-1:0})]}),suffix:!Z&&G&&!W&&!T&&b.jsx(j.OpacityDragTracker,{value:Number(Me),onDrag:we,onDragEnd:Ae}),className:k.default(f.root,g[w],!G&&f.noAlpha,h),testId:S,inputContainerRef:Q,value:Me,onChange:Ne,onFocus:be,inputType:"number",inputMode:"numeric",elementsClassNames:H,htmlAttributes:ze}),b.jsxs(u.Popover,{ref:le,anchorEl:Q.current,open:Z,onClose:ve,placement:N,className:k.default(f.popover,Ee&&f.marginVertical,Re&&f.marginHorizontal,0===ue.a&&f.isTransparent,H.popover),children:[ee?b.jsx(d.Swatches,{onChange:Te,value:U,addTransparent:G,autoFocus:"palette"===ce,onAutoFocus:xe}):b.jsx("div",{ref:De,className:f.pickerContainer,onKeyDown:Fe,children:b.jsx(c.ChromePicker,{color:ue,onChange:ye,onChangeComplete:Se,disableAlpha:!G,className:f.picker})}),b.jsxs("div",{className:f.switchButtons,children:[b.jsx(l.Tooltip,{title:"Palette",children:b.jsx(a.ButtonIcon,{ariaLabel:"Show color palette",size:"medium",type:ee?"secondary":"tertiary",onClick:Ce,children:b.jsx(I.PaletteIcon,{})})}),b.jsx(l.Tooltip,{title:"Pick your own",children:b.jsx(a.ButtonIcon,{ariaLabel:"Show custom color picker",size:"medium",type:ee?"tertiary":"secondary",onClick:ke,children:b.jsx(I.PickerIcon,{})})})]})]}),Z&&G&&!W&&b.jsx(m.Popper,{open:Z,anchorEl:Q.current,className:f.dragTrackerPopper,placement:"right",children:b.jsx(j.OpacityDragTracker,{onDrag:we,onDragEnd:Ae})})]})};
 //# sourceMappingURL=ColorPicker.js.map

package/cjs-bundle/componentsV2/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../../src/componentsV2/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n  CSSProperties,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChromePicker, ColorResult } from 'react-color';\nimport { throttle } from 'lodash';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputNext, TextInputNextProps } from '../TextInputNext';\nimport { Popover, PopoverProps } from '../Popover';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Tooltip } from '../Tooltip';\nimport { Popper } from '../Popper';\n\nimport { Swatches } from './Swatches';\nimport { channelsToHex, channelsToRgba, ColorChannels, defaultColor, parseColor } from './utils';\nimport { OpacityDragTracker } from './OpacityDragtracker';\nimport { useChromePickerAccessibility } from './useChromePickerAccessibility';\n\nimport styles from './ColorPicker.scss';\n\nimport { PaletteIcon, PickerIcon } from '~/icons';\n\nexport type ColorPickerProps = {\n  value?: string;\n  onChange?: (value: string) => void;\n\n  size?: TextInputNextProps['size'];\n  label?: TextInputNextProps['label'];\n  labelPlacement?: TextInputNextProps['labelPlacement'];\n  disabled?: boolean;\n  /**\n   * Disables drag to change opacity functinality\n   */\n  disableOpacityDrag?: boolean;\n  /**\n   * Determines base format of the colour `rgb(RRR, GGG, BBB[, AAA])` or `#RRGGBB[AA]`\n   */\n  format?: 'rgb' | 'hex';\n  /**\n   * Allows user to control color's opacity, adds alpha channel to resulting color string\n   */\n  enableAlpha?: boolean;\n\n  popoverPlacement?: PopoverProps['placement'];\n\n  onOpen?: () => void;\n  onClose?: () => void;\n\n  elementsClassNames?: Partial<\n    Omit<\n      Required<TextInputNextProps>['elementsClassNames'],\n      'message' | 'numberStepButtons' | 'prefix' | 'suffix'\n    > &\n      Record<'indicator' | 'popover', string>\n  >;\n\n  className?: string;\n  testId?: string;\n};\n\nconst SizeToClassMap: Record<Required<ColorPickerProps>['size'], string> = {\n  small: styles.small,\n  medium: styles.medium,\n  large: styles.large,\n};\n\ntype FocusTarget = 'palette' | 'picker';\n\nexport const ColorPicker = ({\n  format = 'hex',\n  className,\n  label,\n  labelPlacement = 'top',\n  popoverPlacement = 'bottom-start',\n  testId,\n  disabled,\n  size = 'small',\n  onOpen,\n  onClose,\n  value = defaultColor,\n  onChange,\n  disableOpacityDrag,\n  enableAlpha = false,\n  elementsClassNames = {},\n}: ColorPickerProps) => {\n  const inputElementsClassNames = useMemo<TextInputNextProps['elementsClassNames']>(\n    () => ({\n      input: classNames(styles.input, elementsClassNames.input),\n      inputContainer: classNames(styles.inputContainer, elementsClassNames.inputContainer),\n      label: classNames(styles.label, elementsClassNames.label),\n      prefix: styles.prefixContainer,\n      suffix: styles.suffixContainer,\n      numberStepButtons: styles.numberStepButtons,\n    }),\n    [elementsClassNames.input, elementsClassNames.inputContainer, elementsClassNames.label]\n  );\n\n  const valueChannels = useMemo(() => {\n    try {\n      const channels = parseColor(value);\n\n      return { ...channels, a: enableAlpha ? channels.a : 1 };\n    } catch (_) {\n      return parseColor(defaultColor);\n    }\n  }, [value, enableAlpha]);\n\n  const [isMenuOpen, setIsOpen] = useState(false);\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const indicatorRef = useRef<HTMLDivElement>(null);\n  const [isSwatches, setIsSwatches] = useState(true);\n  const [focusTarget, setFocusTarget] = useState<FocusTarget | null>(null);\n  const [internalValue, setInternalValue] = useState<ColorChannels>(valueChannels);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const accessibilityId = useMemo(() => `corva-color-picker-${uuidv4()}`, []);\n  const inputId = `${accessibilityId}-opacity-input`;\n  const labelId = `${accessibilityId}-label`;\n  const opacityLabelId = `${accessibilityId}-opacity-label`;\n  const hasLabel = Boolean(label);\n\n  const openMenu = useCallback(() => {\n    setIsOpen(true);\n    onOpen?.();\n  }, [onOpen]);\n\n  const openMenuSwatch = useCallback<MouseEventHandler>(\n    e => {\n      e.preventDefault();\n      setFocusTarget(null);\n      openMenu();\n    },\n    [openMenu]\n  );\n\n  const openMenuFocus = useCallback(() => {\n    setFocusTarget(null);\n    openMenu();\n  }, [openMenu]);\n\n  const openMenuKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n    event => {\n      if (!disabled && (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown')) {\n        event.preventDefault();\n        setFocusTarget('palette');\n        openMenu();\n      }\n    },\n    [disabled, openMenu]\n  );\n\n  const closeMenu = useCallback(() => {\n    const isFocusInPopover = !!popoverRef.current?.contains(document.activeElement);\n\n    setFocusTarget(null);\n    setIsOpen(false);\n    onClose?.();\n\n    // Return focus to the trigger so keyboard flow is not lost after Escape/outside dismiss\n    if (isFocusInPopover) {\n      indicatorRef.current?.focus({ preventScroll: true });\n    }\n  }, [onClose]);\n\n  const setSwatches = useCallback<MouseEventHandler<HTMLButtonElement>>(event => {\n    setFocusTarget(event.detail === 0 ? 'palette' : null);\n    setIsSwatches(true);\n  }, []);\n\n  const setPicker = useCallback<MouseEventHandler<HTMLButtonElement>>(event => {\n    setFocusTarget(event.detail === 0 ? 'picker' : null);\n    setIsSwatches(false);\n  }, []);\n\n  const clearFocusTarget = useCallback(() => setFocusTarget(null), []);\n\n  const onInternalValueChange = useCallback(\n    (color: ColorResult) => setInternalValue(color.rgb),\n    []\n  );\n\n  const onActualChange = useCallback(\n    (color: ColorChannels) => {\n      const formatted =\n        format === 'hex' ? channelsToHex(color, enableAlpha) : channelsToRgba(color, enableAlpha);\n      onChange?.(formatted);\n    },\n    [format, onChange, enableAlpha]\n  );\n\n  const onKeyboardPickerChange = useCallback(\n    (color: ColorChannels) => {\n      setInternalValue(color);\n      onActualChange(color);\n    },\n    [onActualChange]\n  );\n\n  const { pickerRef, onKeyDown: onPickerKeyDown } = useChromePickerAccessibility({\n    color: internalValue,\n    enableAlpha,\n    isActive: !isSwatches,\n    onChange: onKeyboardPickerChange,\n  });\n\n  useEffect(() => {\n    if (focusTarget !== 'picker' || isSwatches) {\n      return;\n    }\n\n    const firstControl = pickerRef.current?.querySelector<HTMLElement>(\n      '[data-color-picker-control=\"saturation\"]'\n    );\n\n    if (firstControl) {\n      firstControl.focus({ preventScroll: true });\n      clearFocusTarget();\n    }\n  }, [clearFocusTarget, focusTarget, isSwatches, pickerRef]);\n\n  const onOpacityInputChange = useCallback(\n    (opacityString: string) => {\n      const opacityNumber = Number(opacityString);\n\n      if (Number.isNaN(opacityNumber) || opacityNumber < 0 || opacityNumber > 100) {\n        return;\n      }\n\n      const color = { ...valueChannels, a: opacityNumber / 100 };\n      onActualChange(color);\n    },\n    [valueChannels, onActualChange]\n  );\n\n  const pickerOnChange = useCallback(\n    (color: ColorResult) => {\n      onActualChange(color.rgb);\n    },\n    [onActualChange]\n  );\n\n  const swatchOnChange = useCallback(\n    (color: ColorChannels) => {\n      const nonZeroAlpha = valueChannels.a || 1;\n      const alpha = enableAlpha && color.a === 0 ? 0 : nonZeroAlpha;\n      onActualChange({ ...color, a: alpha });\n    },\n    [onActualChange, valueChannels.a, enableAlpha]\n  );\n\n  // Prevents focus on opacity drag end\n  const onOpacityDragEnd = useCallback(() => {\n    setTimeout(() => {\n      setIsOpen(false);\n      (document.activeElement as HTMLElement | null)?.blur?.();\n    }, 0);\n  }, []);\n\n  const onOpacityDrag = useMemo(\n    () =>\n      throttle((percent: number) => {\n        const newFieldValue = String(Math.round(percent));\n        onOpacityInputChange(newFieldValue);\n      }, 100),\n    [onOpacityInputChange]\n  );\n\n  useEffect(() => {\n    setInternalValue(valueChannels);\n  }, [valueChannels]);\n\n  useEffect(() => {\n    if (isMenuOpen) {\n      setIsSwatches(true);\n    }\n  }, [isMenuOpen]);\n\n  const inputValue = String(Math.round(internalValue.a * 100));\n\n  const hasVerticalMargin =\n    popoverPlacement?.startsWith('top') || popoverPlacement?.startsWith('bottom');\n  const hasHorizontalMargin =\n    popoverPlacement?.startsWith('left') || popoverPlacement?.startsWith('right');\n  const accessibleLabel = hasLabel ? (\n    <>\n      <label id={labelId} htmlFor={inputId}>\n        {typeof label === 'string' ? <TextInputNext.Label>{label}</TextInputNext.Label> : label}\n      </label>\n      <span id={opacityLabelId} hidden>\n        Opacity\n      </span>\n    </>\n  ) : undefined;\n  const inputHtmlAttributes: TextInputNextProps['htmlAttributes'] = useMemo(\n    () =>\n      hasLabel\n        ? {\n            id: inputId,\n            'aria-labelledby': `${labelId} ${opacityLabelId}`,\n          }\n        : {\n            id: inputId,\n            'aria-label': 'Opacity',\n          },\n    [hasLabel, inputId, labelId, opacityLabelId]\n  );\n\n  return (\n    <>\n      <TextInputNext\n        label={accessibleLabel}\n        labelPlacement={labelPlacement}\n        disabled={disabled}\n        size={size}\n        rootTagName=\"div\"\n        prefix={\n          <>\n            <div className={styles.fakeValue}>\n              {inputValue}\n              <span className={styles.fakeValuePercent}>%</span>\n            </div>\n\n            <div\n              ref={indicatorRef}\n              className={classNames(\n                styles.indicator,\n                internalValue.a === 0 && styles.transparent,\n                elementsClassNames.indicator\n              )}\n              style={\n                {\n                  '--corvaui-colorpicker-indicatorcolor': channelsToHex(internalValue, false),\n                } as CSSProperties\n              }\n              onClick={disabled ? undefined : openMenuSwatch}\n              onKeyDown={openMenuKeyDown}\n              role=\"button\"\n              aria-label={hasLabel ? undefined : 'Color picker'}\n              aria-labelledby={hasLabel ? labelId : undefined}\n              aria-expanded={isMenuOpen}\n              aria-disabled={disabled}\n              tabIndex={disabled ? -1 : 0}\n            />\n          </>\n        }\n        suffix={\n          !isMenuOpen &&\n          enableAlpha &&\n          !disableOpacityDrag &&\n          !disabled && (\n            <OpacityDragTracker\n              value={Number(inputValue)}\n              onDrag={onOpacityDrag}\n              onDragEnd={onOpacityDragEnd}\n            />\n          )\n        }\n        className={classNames(\n          styles.root,\n          SizeToClassMap[size],\n          !enableAlpha && styles.noAlpha,\n          className\n        )}\n        testId={testId}\n        inputContainerRef={inputContainerRef}\n        value={inputValue}\n        onChange={onOpacityInputChange}\n        onFocus={openMenuFocus}\n        inputType=\"number\"\n        inputMode=\"numeric\"\n        htmlAttributes={inputHtmlAttributes}\n        elementsClassNames={inputElementsClassNames}\n      />\n\n      {/* Popover backdrop is needed for ColorPicker to work better in popovers: click outside will close the ColorPicker but not the popover */}\n      <Popover\n        ref={popoverRef}\n        anchorEl={inputContainerRef.current}\n        open={isMenuOpen}\n        onClose={closeMenu}\n        placement={popoverPlacement}\n        className={classNames(\n          styles.popover,\n          hasVerticalMargin && styles.marginVertical,\n          hasHorizontalMargin && styles.marginHorizontal,\n          internalValue.a === 0 && styles.isTransparent,\n          elementsClassNames.popover\n        )}\n      >\n        {isSwatches ? (\n          <Swatches\n            onChange={swatchOnChange}\n            value={valueChannels}\n            addTransparent={enableAlpha}\n            autoFocus={focusTarget === 'palette'}\n            onAutoFocus={clearFocusTarget}\n          />\n        ) : (\n          <div ref={pickerRef} className={styles.pickerContainer} onKeyDown={onPickerKeyDown}>\n            <ChromePicker\n              color={internalValue}\n              onChange={onInternalValueChange}\n              onChangeComplete={pickerOnChange}\n              disableAlpha={!enableAlpha}\n              className={styles.picker}\n            />\n          </div>\n        )}\n        <div className={styles.switchButtons}>\n          <Tooltip title=\"Palette\">\n            <ButtonIcon\n              ariaLabel=\"Show color palette\"\n              size=\"medium\"\n              type={isSwatches ? 'secondary' : 'tertiary'}\n              onClick={setSwatches}\n            >\n              <PaletteIcon />\n            </ButtonIcon>\n          </Tooltip>\n          <Tooltip title=\"Pick your own\">\n            <ButtonIcon\n              ariaLabel=\"Show custom color picker\"\n              size=\"medium\"\n              type={!isSwatches ? 'secondary' : 'tertiary'}\n              onClick={setPicker}\n            >\n              <PickerIcon />\n            </ButtonIcon>\n          </Tooltip>\n        </div>\n      </Popover>\n\n      {/* Opacity Drag Tracker should work even with popover open with a backdrop */}\n      {isMenuOpen && enableAlpha && !disableOpacityDrag && (\n        <Popper\n          open={isMenuOpen}\n          anchorEl={inputContainerRef.current}\n          className={styles.dragTrackerPopper}\n          placement=\"right\"\n        >\n          <OpacityDragTracker onDrag={onOpacityDrag} onDragEnd={onOpacityDragEnd} />\n        </Popper>\n      )}\n    </>\n  );\n};\n"],"names":["SizeToClassMap","small","styles","medium","large","_ref","_ref$format","format","className","label","_ref$labelPlacement","labelPlacement","_ref$popoverPlacement","popoverPlacement","testId","disabled","_ref$size","size","onOpen","onClose","_ref$value","value","defaultColor","onChange","disableOpacityDrag","_ref$enableAlpha","enableAlpha","_ref$elementsClassNam","elementsClassNames","inputElementsClassNames","useMemo","input","classNames","inputContainer","prefix","prefixContainer","suffix","suffixContainer","numberStepButtons","valueChannels","channels","parseColor","_objectSpread","a","_","useState","_useState2","_slicedToArray","_useState","isMenuOpen","setIsOpen","inputContainerRef","useRef","indicatorRef","_useState4","_useState3","isSwatches","setIsSwatches","_useState6","_useState5","focusTarget","setFocusTarget","_useState8","_useState7","internalValue","setInternalValue","popoverRef","accessibilityId","concat","uuidv4","v4","inputId","labelId","opacityLabelId","hasLabel","Boolean","openMenu","useCallback","openMenuSwatch","e","preventDefault","openMenuFocus","openMenuKeyDown","event","key","closeMenu","_popoverRef$current","_indicatorRef$current","isFocusInPopover","current","contains","document","activeElement","focus","preventScroll","setSwatches","detail","setPicker","clearFocusTarget","onInternalValueChange","color","rgb","onActualChange","formatted","channelsToHex","channelsToRgba","onKeyboardPickerChange","_useChromePickerAcces","useChromePickerAccessibility","isActive","pickerRef","onPickerKeyDown","onKeyDown","useEffect","_pickerRef$current","firstControl","querySelector","onOpacityInputChange","opacityString","opacityNumber","Number","isNaN","pickerOnChange","swatchOnChange","nonZeroAlpha","alpha","onOpacityDragEnd","setTimeout","_document$activeEleme","_document$activeEleme2","blur","call","onOpacityDrag","throttle","percent","newFieldValue","String","Math","round","inputValue","hasVerticalMargin","startsWith","hasHorizontalMargin","accessibleLabel","_jsxs","jsxs","_Fragment","children","_jsx","jsx","id","htmlFor","TextInputNext","Label","hidden","undefined","inputHtmlAttributes","rootTagName","fakeValue","fakeValuePercent","ref","indicator","transparent","style","onClick","role","tabIndex","OpacityDragTracker","onDrag","onDragEnd","root","noAlpha","onFocus","inputType","inputMode","htmlAttributes","Popover","anchorEl","open","placement","popover","marginVertical","marginHorizontal","isTransparent","Swatches","addTransparent","autoFocus","onAutoFocus","pickerContainer","ChromePicker","onChangeComplete","disableAlpha","picker","switchButtons","Tooltip","title","ButtonIcon","ariaLabel","type","PaletteIcon","PickerIcon","Popper","dragTrackerPopper"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","sources":["../../../../src/componentsV2/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n  CSSProperties,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChromePicker, ColorResult } from 'react-color';\nimport { throttle } from 'lodash';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputNext, TextInputNextProps } from '../TextInputNext';\nimport { Popover, PopoverProps } from '../Popover';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Tooltip } from '../Tooltip';\nimport { Popper } from '../Popper';\n\nimport { Swatches } from './Swatches';\nimport { channelsToHex, channelsToRgba, ColorChannels, defaultColor, parseColor } from './utils';\nimport { OpacityDragTracker } from './OpacityDragtracker';\nimport { useChromePickerAccessibility } from './useChromePickerAccessibility';\n\nimport styles from './ColorPicker.scss';\n\nimport { PaletteIcon, PickerIcon } from '~/icons';\n\nexport type ColorPickerProps = {\n  value?: string;\n  onChange?: (value: string) => void;\n\n  size?: TextInputNextProps['size'];\n  label?: TextInputNextProps['label'];\n  labelPlacement?: TextInputNextProps['labelPlacement'];\n  disabled?: boolean;\n  /**\n   * Disables drag to change opacity functinality\n   */\n  disableOpacityDrag?: boolean;\n  /**\n   * Determines base format of the colour `rgb(RRR, GGG, BBB[, AAA])` or `#RRGGBB[AA]`\n   */\n  format?: 'rgb' | 'hex';\n  /**\n   * Allows user to control color's opacity, adds alpha channel to resulting color string\n   */\n  enableAlpha?: boolean;\n\n  popoverPlacement?: PopoverProps['placement'];\n\n  onOpen?: () => void;\n  onClose?: () => void;\n\n  /**\n   * An escape hatch to tweak styling of internal elements\n   */\n  elementsClassNames?: Partial<\n    Omit<\n      Required<TextInputNextProps>['elementsClassNames'],\n      'message' | 'numberStepButtons' | 'prefix' | 'suffix'\n    > &\n      Record<'indicator' | 'popover', string>\n  >;\n\n  className?: string;\n  testId?: string;\n};\n\nconst SizeToClassMap: Record<Required<ColorPickerProps>['size'], string> = {\n  small: styles.small,\n  medium: styles.medium,\n  large: styles.large,\n};\n\nconst ownInputElementsClassNames: TextInputNextProps['elementsClassNames'] = {\n  inputContainer: styles.inputContainer,\n  numberStepButtons: styles.numberStepButtons,\n  prefix: styles.prefixContainer,\n  suffix: styles.suffixContainer,\n  input: styles.input,\n  label: styles.label,\n};\n\ntype FocusTarget = 'palette' | 'picker';\n\nexport const ColorPicker = ({\n  format = 'hex',\n  className,\n  label,\n  labelPlacement = 'top',\n  popoverPlacement = 'bottom-start',\n  testId,\n  disabled,\n  size = 'small',\n  onOpen,\n  onClose,\n  value = defaultColor,\n  onChange,\n  disableOpacityDrag,\n  enableAlpha = false,\n  elementsClassNames,\n}: ColorPickerProps) => {\n  const valueChannels = useMemo(() => {\n    try {\n      const channels = parseColor(value);\n\n      return { ...channels, a: enableAlpha ? channels.a : 1 };\n    } catch (_) {\n      return parseColor(defaultColor);\n    }\n  }, [value, enableAlpha]);\n\n  const realElementsClassNames = useMemo((): Required<ColorPickerProps>['elementsClassNames'] => {\n    return elementsClassNames\n      ? Object.entries(elementsClassNames).reduce<Required<ColorPickerProps>['elementsClassNames']>(\n          (acc, pair) => {\n            const [key, value] = pair as [\n              keyof Required<ColorPickerProps>['elementsClassNames'],\n              string\n            ];\n            return {\n              ...acc,\n              [key]: acc[key] ? classNames(acc[key], value) : value,\n            };\n          },\n          {\n            ...ownInputElementsClassNames,\n          }\n        )\n      : ownInputElementsClassNames;\n  }, [elementsClassNames]);\n\n  const [isMenuOpen, setIsOpen] = useState(false);\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const indicatorRef = useRef<HTMLDivElement>(null);\n  const [isSwatches, setIsSwatches] = useState(true);\n  const [focusTarget, setFocusTarget] = useState<FocusTarget | null>(null);\n  const [internalValue, setInternalValue] = useState<ColorChannels>(valueChannels);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const accessibilityId = useMemo(() => `corva-color-picker-${uuidv4()}`, []);\n  const inputId = `${accessibilityId}-opacity-input`;\n  const labelId = `${accessibilityId}-label`;\n  const opacityLabelId = `${accessibilityId}-opacity-label`;\n  const hasLabel = Boolean(label);\n\n  const openMenu = useCallback(() => {\n    setIsOpen(true);\n    onOpen?.();\n  }, [onOpen]);\n\n  const openMenuSwatch = useCallback<MouseEventHandler>(\n    e => {\n      e.preventDefault();\n      setFocusTarget(null);\n      openMenu();\n    },\n    [openMenu]\n  );\n\n  const openMenuFocus = useCallback(() => {\n    setFocusTarget(null);\n    openMenu();\n  }, [openMenu]);\n\n  const openMenuKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n    event => {\n      if (!disabled && (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown')) {\n        event.preventDefault();\n        setFocusTarget('palette');\n        openMenu();\n      }\n    },\n    [disabled, openMenu]\n  );\n\n  const closeMenu = useCallback(() => {\n    const isFocusInPopover = !!popoverRef.current?.contains(document.activeElement);\n\n    setFocusTarget(null);\n    setIsOpen(false);\n    onClose?.();\n\n    // Return focus to the trigger so keyboard flow is not lost after Escape/outside dismiss\n    if (isFocusInPopover) {\n      indicatorRef.current?.focus({ preventScroll: true });\n    }\n  }, [onClose]);\n\n  const setSwatches = useCallback<MouseEventHandler<HTMLButtonElement>>(event => {\n    setFocusTarget(event.detail === 0 ? 'palette' : null);\n    setIsSwatches(true);\n  }, []);\n\n  const setPicker = useCallback<MouseEventHandler<HTMLButtonElement>>(event => {\n    setFocusTarget(event.detail === 0 ? 'picker' : null);\n    setIsSwatches(false);\n  }, []);\n\n  const clearFocusTarget = useCallback(() => setFocusTarget(null), []);\n\n  const onInternalValueChange = useCallback(\n    (color: ColorResult) => setInternalValue(color.rgb),\n    []\n  );\n\n  const onActualChange = useCallback(\n    (color: ColorChannels) => {\n      const formatted =\n        format === 'hex' ? channelsToHex(color, enableAlpha) : channelsToRgba(color, enableAlpha);\n      onChange?.(formatted);\n    },\n    [format, onChange, enableAlpha]\n  );\n\n  const onKeyboardPickerChange = useCallback(\n    (color: ColorChannels) => {\n      setInternalValue(color);\n      onActualChange(color);\n    },\n    [onActualChange]\n  );\n\n  const { pickerRef, onKeyDown: onPickerKeyDown } = useChromePickerAccessibility({\n    color: internalValue,\n    enableAlpha,\n    isActive: !isSwatches,\n    onChange: onKeyboardPickerChange,\n  });\n\n  useEffect(() => {\n    if (focusTarget !== 'picker' || isSwatches) {\n      return;\n    }\n\n    const firstControl = pickerRef.current?.querySelector<HTMLElement>(\n      '[data-color-picker-control=\"saturation\"]'\n    );\n\n    if (firstControl) {\n      firstControl.focus({ preventScroll: true });\n      clearFocusTarget();\n    }\n  }, [clearFocusTarget, focusTarget, isSwatches, pickerRef]);\n\n  const onOpacityInputChange = useCallback(\n    (opacityString: string) => {\n      const opacityNumber = Number(opacityString);\n\n      if (Number.isNaN(opacityNumber) || opacityNumber < 0 || opacityNumber > 100) {\n        return;\n      }\n\n      const color = { ...valueChannels, a: opacityNumber / 100 };\n      onActualChange(color);\n    },\n    [valueChannels, onActualChange]\n  );\n\n  const pickerOnChange = useCallback(\n    (color: ColorResult) => {\n      onActualChange(color.rgb);\n    },\n    [onActualChange]\n  );\n\n  const swatchOnChange = useCallback(\n    (color: ColorChannels) => {\n      const nonZeroAlpha = valueChannels.a || 1;\n      const alpha = enableAlpha && color.a === 0 ? 0 : nonZeroAlpha;\n      onActualChange({ ...color, a: alpha });\n    },\n    [onActualChange, valueChannels.a, enableAlpha]\n  );\n\n  // Prevents focus on opacity drag end\n  const onOpacityDragEnd = useCallback(() => {\n    setTimeout(() => {\n      setIsOpen(false);\n      (document.activeElement as HTMLElement | null)?.blur?.();\n    }, 0);\n  }, []);\n\n  const onOpacityDrag = useMemo(\n    () =>\n      throttle((percent: number) => {\n        const newFieldValue = String(Math.round(percent));\n        onOpacityInputChange(newFieldValue);\n      }, 100),\n    [onOpacityInputChange]\n  );\n\n  useEffect(() => {\n    setInternalValue(valueChannels);\n  }, [valueChannels]);\n\n  useEffect(() => {\n    if (isMenuOpen) {\n      setIsSwatches(true);\n    }\n  }, [isMenuOpen]);\n\n  const inputValue = String(Math.round(internalValue.a * 100));\n\n  const hasVerticalMargin =\n    popoverPlacement?.startsWith('top') || popoverPlacement?.startsWith('bottom');\n  const hasHorizontalMargin =\n    popoverPlacement?.startsWith('left') || popoverPlacement?.startsWith('right');\n  const accessibleLabel = hasLabel ? (\n    <>\n      <label id={labelId} htmlFor={inputId}>\n        {typeof label === 'string' ? <TextInputNext.Label>{label}</TextInputNext.Label> : label}\n      </label>\n      <span id={opacityLabelId} hidden>\n        Opacity\n      </span>\n    </>\n  ) : undefined;\n  const inputHtmlAttributes: TextInputNextProps['htmlAttributes'] = useMemo(\n    () =>\n      hasLabel\n        ? {\n            id: inputId,\n            'aria-labelledby': `${labelId} ${opacityLabelId}`,\n          }\n        : {\n            id: inputId,\n            'aria-label': 'Opacity',\n          },\n    [hasLabel, inputId, labelId, opacityLabelId]\n  );\n\n  return (\n    <>\n      <TextInputNext\n        label={accessibleLabel}\n        labelPlacement={labelPlacement}\n        disabled={disabled}\n        size={size}\n        rootTagName=\"div\"\n        prefix={\n          <>\n            <div className={styles.fakeValue}>\n              {inputValue}\n              <span className={styles.fakeValuePercent}>%</span>\n            </div>\n\n            <div\n              ref={indicatorRef}\n              className={classNames(\n                styles.indicator,\n                internalValue.a === 0 && styles.transparent,\n                realElementsClassNames.indicator\n              )}\n              style={\n                {\n                  '--corvaui-colorpicker-indicatorcolor': channelsToHex(internalValue, false),\n                } as CSSProperties\n              }\n              onClick={disabled ? undefined : openMenuSwatch}\n              onKeyDown={openMenuKeyDown}\n              role=\"button\"\n              aria-label={hasLabel ? undefined : 'Color picker'}\n              aria-labelledby={hasLabel ? labelId : undefined}\n              aria-expanded={isMenuOpen}\n              aria-disabled={disabled}\n              tabIndex={disabled ? -1 : 0}\n            />\n          </>\n        }\n        suffix={\n          !isMenuOpen &&\n          enableAlpha &&\n          !disableOpacityDrag &&\n          !disabled && (\n            <OpacityDragTracker\n              value={Number(inputValue)}\n              onDrag={onOpacityDrag}\n              onDragEnd={onOpacityDragEnd}\n            />\n          )\n        }\n        className={classNames(\n          styles.root,\n          SizeToClassMap[size],\n          !enableAlpha && styles.noAlpha,\n          className\n        )}\n        testId={testId}\n        inputContainerRef={inputContainerRef}\n        value={inputValue}\n        onChange={onOpacityInputChange}\n        onFocus={openMenuFocus}\n        inputType=\"number\"\n        inputMode=\"numeric\"\n        elementsClassNames={realElementsClassNames}\n        htmlAttributes={inputHtmlAttributes}\n      />\n\n      {/* Popover backdrop is needed for ColorPicker to work better in popovers: click outside will close the ColorPicker but not the popover */}\n      <Popover\n        ref={popoverRef}\n        anchorEl={inputContainerRef.current}\n        open={isMenuOpen}\n        onClose={closeMenu}\n        placement={popoverPlacement}\n        className={classNames(\n          styles.popover,\n          hasVerticalMargin && styles.marginVertical,\n          hasHorizontalMargin && styles.marginHorizontal,\n          internalValue.a === 0 && styles.isTransparent,\n          realElementsClassNames.popover\n        )}\n      >\n        {isSwatches ? (\n          <Swatches\n            onChange={swatchOnChange}\n            value={valueChannels}\n            addTransparent={enableAlpha}\n            autoFocus={focusTarget === 'palette'}\n            onAutoFocus={clearFocusTarget}\n          />\n        ) : (\n          <div ref={pickerRef} className={styles.pickerContainer} onKeyDown={onPickerKeyDown}>\n            <ChromePicker\n              color={internalValue}\n              onChange={onInternalValueChange}\n              onChangeComplete={pickerOnChange}\n              disableAlpha={!enableAlpha}\n              className={styles.picker}\n            />\n          </div>\n        )}\n        <div className={styles.switchButtons}>\n          <Tooltip title=\"Palette\">\n            <ButtonIcon\n              ariaLabel=\"Show color palette\"\n              size=\"medium\"\n              type={isSwatches ? 'secondary' : 'tertiary'}\n              onClick={setSwatches}\n            >\n              <PaletteIcon />\n            </ButtonIcon>\n          </Tooltip>\n          <Tooltip title=\"Pick your own\">\n            <ButtonIcon\n              ariaLabel=\"Show custom color picker\"\n              size=\"medium\"\n              type={!isSwatches ? 'secondary' : 'tertiary'}\n              onClick={setPicker}\n            >\n              <PickerIcon />\n            </ButtonIcon>\n          </Tooltip>\n        </div>\n      </Popover>\n\n      {/* Opacity Drag Tracker should work even with popover open with a backdrop */}\n      {isMenuOpen && enableAlpha && !disableOpacityDrag && (\n        <Popper\n          open={isMenuOpen}\n          anchorEl={inputContainerRef.current}\n          className={styles.dragTrackerPopper}\n          placement=\"right\"\n        >\n          <OpacityDragTracker onDrag={onOpacityDrag} onDragEnd={onOpacityDragEnd} />\n        </Popper>\n      )}\n    </>\n  );\n};\n"],"names":["SizeToClassMap","small","styles","medium","large","ownInputElementsClassNames","inputContainer","numberStepButtons","prefix","prefixContainer","suffix","suffixContainer","input","label","_ref","_ref$format","format","className","_ref$labelPlacement","labelPlacement","_ref$popoverPlacement","popoverPlacement","testId","disabled","_ref$size","size","onOpen","onClose","_ref$value","value","defaultColor","onChange","disableOpacityDrag","_ref$enableAlpha","enableAlpha","elementsClassNames","valueChannels","useMemo","channels","parseColor","_objectSpread","a","_","realElementsClassNames","Object","entries","reduce","acc","pair","_ref2","_ref3","_slicedToArray","key","classNames","useState","_useState2","_useState","isMenuOpen","setIsOpen","inputContainerRef","useRef","indicatorRef","_useState4","_useState3","isSwatches","setIsSwatches","_useState6","_useState5","focusTarget","setFocusTarget","_useState8","_useState7","internalValue","setInternalValue","popoverRef","accessibilityId","concat","uuidv4","v4","inputId","labelId","opacityLabelId","hasLabel","Boolean","openMenu","useCallback","openMenuSwatch","e","preventDefault","openMenuFocus","openMenuKeyDown","event","closeMenu","_popoverRef$current","_indicatorRef$current","isFocusInPopover","current","contains","document","activeElement","focus","preventScroll","setSwatches","detail","setPicker","clearFocusTarget","onInternalValueChange","color","rgb","onActualChange","formatted","channelsToHex","channelsToRgba","onKeyboardPickerChange","_useChromePickerAcces","useChromePickerAccessibility","isActive","pickerRef","onPickerKeyDown","onKeyDown","useEffect","_pickerRef$current","firstControl","querySelector","onOpacityInputChange","opacityString","opacityNumber","Number","isNaN","pickerOnChange","swatchOnChange","nonZeroAlpha","alpha","onOpacityDragEnd","setTimeout","_document$activeEleme","_document$activeEleme2","blur","call","onOpacityDrag","throttle","percent","newFieldValue","String","Math","round","inputValue","hasVerticalMargin","startsWith","hasHorizontalMargin","accessibleLabel","_jsxs","jsxs","_Fragment","children","_jsx","jsx","id","htmlFor","TextInputNext","Label","hidden","undefined","inputHtmlAttributes","rootTagName","fakeValue","fakeValuePercent","ref","indicator","transparent","style","onClick","role","tabIndex","OpacityDragTracker","onDrag","onDragEnd","root","noAlpha","onFocus","inputType","inputMode","htmlAttributes","Popover","anchorEl","open","placement","popover","marginVertical","marginHorizontal","isTransparent","Swatches","addTransparent","autoFocus","onAutoFocus","pickerContainer","ChromePicker","onChangeComplete","disableAlpha","picker","switchButtons","Tooltip","title","ButtonIcon","ariaLabel","type","PaletteIcon","PickerIcon","Popper","dragTrackerPopper"],"mappings":"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"}

package/cjs-bundle/componentsV2/DatePicker/Input/Input.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),s=require("@babel/runtime/helpers/slicedToArray"),n=require("@babel/runtime/helpers/toConsumableArray"),o=require("react"),r=require("moment"),c=require("classnames"),i=require("../../TextInputNext/TextInputNext.js"),t=require("../../TextInput/TextInput.js"),u=require("../utils.js"),a=require("../../Popper/Popper.js"),l=require("./Input.scss.js"),m=require("../../../icons/iconParkIcons.js");require("../../../icons/customIcons/icons/AddMessage.js"),require("../../../icons/customIcons/icons/DragOne.js"),require("../../../icons/customIcons/icons/Attention.js"),require("../../../icons/customIcons/icons/Collapse.js"),require("../../../icons/customIcons/icons/Dashboard.js"),require("../../../icons/customIcons/icons/Expand.js"),require("../../../icons/customIcons/icons/FolderClosed.js"),require("../../../icons/customIcons/icons/FolderClosedFilled.js"),require("../../../icons/customIcons/icons/FolderOpened.js"),require("../../../icons/customIcons/icons/GreaterOrEqual.js"),require("../../../icons/customIcons/icons/LessOrEqual.js"),require("../../../icons/customIcons/icons/Search.js"),require("../../../icons/customIcons/icons/SearchOne.js"),require("../../../icons/customIcons/icons/Wellhub.js"),require("../../../icons/customIcons/icons/MultiRuler.js"),require("../../../icons/customIcons/icons/Checkbox.js"),require("../../../icons/customIcons/icons/CheckboxChecked.js"),require("../../../icons/customIcons/icons/CheckboxIndeterminate.js"),require("../../../icons/customIcons/icons/Radio.js"),require("../../../icons/customIcons/icons/RadioChecked.js"),require("../../../icons/customIcons/icons/SimulFrac.js"),require("../../../icons/customIcons/icons/ZipperFrac.js"),require("../../../icons/customIcons/icons/CautionFilled.js"),require("../../../icons/customIcons/icons/InfoRounded.js"),require("../../../icons/customIcons/icons/FlameFilled.js"),require("../../../icons/customIcons/icons/MoreApp.js"),require("../../../icons/customIcons/icons/Pad.js"),require("../../../icons/customIcons/icons/DrilloutUnit.js"),require("../../../icons/customIcons/icons/FracFleet.js"),require("../../../icons/customIcons/icons/Global.js"),require("../../../icons/customIcons/icons/Program.js"),require("../../../icons/customIcons/icons/Rig.js"),require("../../../icons/customIcons/icons/Well.js"),require("../../../icons/customIcons/icons/Gap.js"),require("../../../icons/customIcons/icons/Pin.js"),require("../../../icons/customIcons/icons/PinOne.js"),require("../../../icons/customIcons/icons/PinOneCrossed.js"),require("../../../icons/customIcons/icons/CloseOneFilled.js"),require("../../../icons/customIcons/icons/AttentionFilled.js"),require("../../../icons/customIcons/icons/CheckOneFilled.js"),require("../../../icons/customIcons/icons/Archive.js"),require("../../../icons/customIcons/icons/ArchiveCancel.js"),require("../../../icons/customIcons/icons/Unarchive.js"),require("../../../icons/customIcons/icons/Archived.js"),require("../../../icons/customIcons/icons/InterventionUnit.js"),require("../../../icons/customIcons/icons/CloudDelete.js"),require("../../../icons/customIcons/icons/Lasso.js"),require("../../../icons/customIcons/icons/Radius.js"),require("../../../icons/customIcons/icons/ErrorOps.js"),require("../../../icons/customIcons/icons/DataTypeOps.js"),require("../../../icons/customIcons/icons/FalsePositiveOps.js"),require("../../../icons/customIcons/icons/CalibrationOps.js"),require("../../../icons/customIcons/icons/CriticalOps.js"),require("../../../icons/customIcons/icons/Company.js"),require("../../../icons/customIcons/icons/ArchiveOne.js"),require("../../../icons/customIcons/icons/ParseBotFusion.js"),require("../../../icons/customIcons/icons/Connect.js"),require("../../../icons/customIcons/icons/PuzzleOne.js"),require("../../../icons/customIcons/icons/Feed.js"),require("../../../icons/customIcons/icons/Prompt.js"),require("../../../icons/customIcons/icons/Companies.js"),require("../../../icons/customIcons/icons/ClipboardAi.js"),require("../../../icons/customIcons/icons/Key.js"),require("../../../icons/customIcons/icons/AtSignCrossed.js"),require("../../../icons/customIcons/icons/MappingManual.js"),require("../../../icons/customIcons/icons/Mapping.js"),require("../../../icons/customIcons/icons/Metrics.js"),require("../../../icons/customIcons/icons/Drops.js"),require("../../../icons/customIcons/icons/ClipboardSearch.js"),require("../../../icons/customIcons/icons/Template.js"),require("../../../icons/customIcons/icons/ClipboardMetrics.js"),require("../../../icons/customIcons/icons/ClipboardBuilder.js"),require("../../../icons/customIcons/icons/UnitConversion.js"),require("../../../icons/customIcons/icons/NPT.js"),require("../../../icons/customIcons/icons/GuidedFrac.js");var j=require("react/jsx-runtime");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(e),I=d(s),q=d(n),f=d(r),b=d(c);function v(e,s){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);s&&(o=o.filter((function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable}))),n.push.apply(n,o)}return n}function C(e){for(var s=1;s<arguments.length;s++){var n=null!=arguments[s]?arguments[s]:{};s%2?v(Object(n),!0).forEach((function(s){p.default(e,s,n[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):v(Object(n)).forEach((function(s){Object.defineProperty(e,s,Object.getOwnPropertyDescriptor(n,s))}))}return e}var h={flip:{enabled:!1}},O=function(e,s){return e?f.default(e).format(s):s},g=function(e,s){return(Array.isArray(e)?e:[e]).filter((function(e){return!!e})).map((function(e){return O(e,s)})).join(" - ")},x=function(e,s,n){var o=f.default(e,[s].concat(q.default(u.InputParseFormats[n]||[])),!0);return o.isValid()?o.toDate():void 0},y={small:l.small,medium:l.medium,large:l.large},P=o.forwardRef((function(e,s){var n=e.value,r=e.label,c=e.open,d=e.className,p=e.testId,q=e.format,f=e.placeholder,v=e.range,P=e.readOnly,F=e.type,A=e.setValue,D=e.focusOnClear,S=e.labelPlacement,k=e.size,N=void 0===k?"small":k,M=e.elementsClassNames,R=e.isNext,T=e.isOpen,w=e.clearable,E=e.rangeStep,z=e.setRangeStep,B=q||u.getDefaultFormat(F,v),L=g(n,B),V=o.useState(L),G=I.default(V,2),U=G[0],W=G[1],_=o.useState(n),K=I.default(_,2),Z=K[0],H=K[1],J=o.useRef(U),Q=o.useState(0),X=I.default(Q,2),Y=X[0],$=X[1],ee=o.useState(0),se=I.default(ee,2),ne=se[0],oe=se[1],re=o.useRef(null),ce=!!v&&U===L&&T;Z!==n&&(W(L),H(n),J.current=L);var ie=o.useCallback((function(e){if(""===e.trim())return null==A||A(void 0),W(""),void(J.current="");var s=u.autocompleteValue({type:F,range:v,value:e,prevValue:J.current});if(J.current=s,W(s),v){var n=s.split(/[-–—]/).map((function(e){return x(e.trim(),B,F)})).filter((function(e){return!!e}));if(2===n.length){var o=u.getMinDate(n[0],n[1]),r=u.getMaxDate(n[0],n[1]);o&&r&&(null==A||A([o,r]))}}else{var c=x(s,B,F);c&&(null==A||A(c))}}),[B,v,A,F]),te=o.useCallback((function(e){e.target.select(),c()}),[c]),ue=o.useCallback((function(){W(g(n,B)),J.current=""}),[n,B]),ae=o.useCallback((function(){null==A||A(void 0),W("")}),[A]),le=o.useMemo((function(){return C(C({},M),{},{prefix:b.default(null==M?void 0:M.prefix,ce&&l.prefix),input:b.default(null==M?void 0:M.input,ce&&l.rangeDefaultValue),inputContainer:b.default(null==M?void 0:M.inputContainer,l.inputContainer)})}),[ce,M]),me=o.useMemo((function(){return v?{onScroll:function(e){$(e.currentTarget.scrollLeft)}}:void 0}),[v]);return o.useEffect((function(){if(v){var e=new ResizeObserver((function(e){e.forEach((function(e){var s,n;return oe((null===(s=e.borderBoxSize)||void 0===s||null===(n=s[0])||void 0===n?void 0:n.inlineSize)||0)}))}));return re.current&&e.observe(re.current),function(){e.disconnect()}}}),[v]),R?j.jsxs(j.Fragment,{children:[j.jsx(i.TextInputNext,{value:U,inputContainerRef:s,inputRef:re,label:r,onFocus:te,onBlur:ue,className:d,testId:p,suffix:j.jsx(m.CalendarThreeIcon,{}),placeholder:f,onChange:ie,readOnly:P,clearable:w,focusOnClear:D,labelPlacement:S,size:N,elementsClassNames:le,htmlAttributes:me}),j.jsx(a.Popper,{anchorEl:re.current,open:ce,placement:"top-start",className:l.popper,modifiers:h,children:j.jsx("div",{className:b.default(l.rangeOverlay,y[N]),style:{width:ne},children:j.jsx("div",{style:{marginLeft:-Y},children:Array.isArray(n)&&2===n.length&&j.jsxs(j.Fragment,{children:[j.jsx("span",{className:b.default(l.rangePart,"startDate"===E&&l.rangePartActive),onClick:function(){return z("startDate")},children:O(n[0],B)})," - ",j.jsx("span",{className:b.default(l.rangePart,"endDate"===E&&l.rangePartActive),onClick:function(){return z("endDate")},children:O(n[1],B)})]})})})})]}):j.jsx(t.TextInput,{value:U,ref:s,label:r,onFocus:c,onBlur:ue,forceLabelShrink:T,className:d,testId:p,suffix:j.jsx(m.CalendarThreeIcon,{}),placeholder:f,onChange:ie,readOnly:P,onClear:w?ae:void 0,focusOnClear:D})}));exports.Input=P;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),s=require("@babel/runtime/helpers/slicedToArray"),n=require("@babel/runtime/helpers/toConsumableArray"),o=require("react"),r=require("moment"),c=require("classnames"),i=require("../../TextInputNext/TextInputNext.js"),t=require("../../TextInput/TextInput.js"),u=require("../utils.js"),a=require("../../Popper/Popper.js"),l=require("./Input.scss.js"),m=require("../../../icons/iconParkIcons.js");require("../../../icons/customIcons/icons/AddMessage.js"),require("../../../icons/customIcons/icons/DragOne.js"),require("../../../icons/customIcons/icons/Attention.js"),require("../../../icons/customIcons/icons/Collapse.js"),require("../../../icons/customIcons/icons/Dashboard.js"),require("../../../icons/customIcons/icons/Expand.js"),require("../../../icons/customIcons/icons/FolderClosed.js"),require("../../../icons/customIcons/icons/FolderClosedFilled.js"),require("../../../icons/customIcons/icons/FolderOpened.js"),require("../../../icons/customIcons/icons/GreaterOrEqual.js"),require("../../../icons/customIcons/icons/LessOrEqual.js"),require("../../../icons/customIcons/icons/Search.js"),require("../../../icons/customIcons/icons/SearchOne.js"),require("../../../icons/customIcons/icons/Wellhub.js"),require("../../../icons/customIcons/icons/MultiRuler.js"),require("../../../icons/customIcons/icons/Checkbox.js"),require("../../../icons/customIcons/icons/CheckboxChecked.js"),require("../../../icons/customIcons/icons/CheckboxIndeterminate.js"),require("../../../icons/customIcons/icons/Radio.js"),require("../../../icons/customIcons/icons/RadioChecked.js"),require("../../../icons/customIcons/icons/SimulFrac.js"),require("../../../icons/customIcons/icons/ZipperFrac.js"),require("../../../icons/customIcons/icons/CautionFilled.js"),require("../../../icons/customIcons/icons/InfoRounded.js"),require("../../../icons/customIcons/icons/FlameFilled.js"),require("../../../icons/customIcons/icons/MoreApp.js"),require("../../../icons/customIcons/icons/Pad.js"),require("../../../icons/customIcons/icons/DrilloutUnit.js"),require("../../../icons/customIcons/icons/FracFleet.js"),require("../../../icons/customIcons/icons/Global.js"),require("../../../icons/customIcons/icons/Program.js"),require("../../../icons/customIcons/icons/Rig.js"),require("../../../icons/customIcons/icons/Well.js"),require("../../../icons/customIcons/icons/Gap.js"),require("../../../icons/customIcons/icons/Pin.js"),require("../../../icons/customIcons/icons/PinOne.js"),require("../../../icons/customIcons/icons/PinOneCrossed.js"),require("../../../icons/customIcons/icons/CloseOneFilled.js"),require("../../../icons/customIcons/icons/AttentionFilled.js"),require("../../../icons/customIcons/icons/CheckOneFilled.js"),require("../../../icons/customIcons/icons/Archive.js"),require("../../../icons/customIcons/icons/ArchiveCancel.js"),require("../../../icons/customIcons/icons/Unarchive.js"),require("../../../icons/customIcons/icons/Archived.js"),require("../../../icons/customIcons/icons/InterventionUnit.js"),require("../../../icons/customIcons/icons/CloudDelete.js"),require("../../../icons/customIcons/icons/Lasso.js"),require("../../../icons/customIcons/icons/Radius.js"),require("../../../icons/customIcons/icons/ErrorOps.js"),require("../../../icons/customIcons/icons/DataTypeOps.js"),require("../../../icons/customIcons/icons/FalsePositiveOps.js"),require("../../../icons/customIcons/icons/CalibrationOps.js"),require("../../../icons/customIcons/icons/CriticalOps.js"),require("../../../icons/customIcons/icons/Company.js"),require("../../../icons/customIcons/icons/ArchiveOne.js"),require("../../../icons/customIcons/icons/ParseBotFusion.js"),require("../../../icons/customIcons/icons/Connect.js"),require("../../../icons/customIcons/icons/PuzzleOne.js"),require("../../../icons/customIcons/icons/Feed.js"),require("../../../icons/customIcons/icons/Prompt.js"),require("../../../icons/customIcons/icons/Companies.js"),require("../../../icons/customIcons/icons/ClipboardAi.js"),require("../../../icons/customIcons/icons/Key.js"),require("../../../icons/customIcons/icons/AtSignCrossed.js"),require("../../../icons/customIcons/icons/MappingManual.js"),require("../../../icons/customIcons/icons/Mapping.js"),require("../../../icons/customIcons/icons/Metrics.js"),require("../../../icons/customIcons/icons/Drops.js"),require("../../../icons/customIcons/icons/ClipboardSearch.js"),require("../../../icons/customIcons/icons/Template.js"),require("../../../icons/customIcons/icons/ClipboardMetrics.js"),require("../../../icons/customIcons/icons/ClipboardBuilder.js"),require("../../../icons/customIcons/icons/UnitConversion.js"),require("../../../icons/customIcons/icons/NPT.js"),require("../../../icons/customIcons/icons/GuidedFrac.js");var j=require("react/jsx-runtime");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(e),I=d(s),q=d(n),f=d(r),b=d(c);function v(e,s){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);s&&(o=o.filter((function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable}))),n.push.apply(n,o)}return n}function C(e){for(var s=1;s<arguments.length;s++){var n=null!=arguments[s]?arguments[s]:{};s%2?v(Object(n),!0).forEach((function(s){p.default(e,s,n[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):v(Object(n)).forEach((function(s){Object.defineProperty(e,s,Object.getOwnPropertyDescriptor(n,s))}))}return e}var h={flip:{enabled:!1}},O=function(e,s){return e?f.default(e).format(s):s},g=function(e,s){return(Array.isArray(e)?e:[e]).filter((function(e){return!!e})).map((function(e){return O(e,s)})).join(" - ")},x=function(e,s,n){var o=f.default(e,[s].concat(q.default(u.InputParseFormats[n]||[])),!0);return o.isValid()?o.toDate():void 0},y={small:l.small,medium:l.medium,large:l.large},P=o.forwardRef((function(e,s){var n=e.value,r=e.label,c=e.open,d=e.className,p=e.testId,q=e.format,f=e.placeholder,v=e.range,P=e.readOnly,F=e.type,A=e.setValue,D=e.focusOnClear,S=e.labelPlacement,k=e.size,N=void 0===k?"small":k,M=e.elementsClassNames,R=e.isNext,T=e.isOpen,w=e.clearable,E=e.rangeStep,z=e.setRangeStep,B=q||u.getDefaultFormat(F,v),L=g(n,B),V=o.useState(L),G=I.default(V,2),U=G[0],W=G[1],_=o.useState(n),K=I.default(_,2),Z=K[0],H=K[1],J=o.useRef(U),Q=o.useState(0),X=I.default(Q,2),Y=X[0],$=X[1],ee=o.useState(0),se=I.default(ee,2),ne=se[0],oe=se[1],re=o.useRef(null),ce=!!v&&U===L&&T;Z!==n&&(W(L),H(n),J.current=L);var ie=o.useCallback((function(e){if(""===e.trim())return null==A||A(void 0),W(""),void(J.current="");var s=u.autocompleteValue({type:F,range:v,value:e,prevValue:J.current});if(J.current=s,W(s),v){var n=s.split(/[-–—]/).map((function(e){return x(e.trim(),B,F)})).filter((function(e){return!!e}));if(2===n.length){var o=u.getMinDate(n[0],n[1]),r=u.getMaxDate(n[0],n[1]);o&&r&&(null==A||A([o,r]))}}else{var c=x(s,B,F);c&&(null==A||A(c))}}),[B,v,A,F]),te=o.useCallback((function(e){e.target.select(),c()}),[c]),ue=o.useCallback((function(){W(g(n,B)),J.current=""}),[n,B]),ae=o.useCallback((function(){null==A||A(void 0),W("")}),[A]),le=o.useMemo((function(){return C(C({},M),{},{prefix:b.default(null==M?void 0:M.prefix,ce&&l.prefix),input:b.default(null==M?void 0:M.input,ce&&l.rangeDefaultValue),inputContainer:b.default(null==M?void 0:M.inputContainer,l.inputContainer)})}),[ce,M]),me=o.useMemo((function(){return v?{onScroll:function(e){$(e.currentTarget.scrollLeft)}}:void 0}),[v]);return o.useEffect((function(){if(v){var e=new ResizeObserver((function(e){e.forEach((function(e){var s,n;return oe((null===(s=e.borderBoxSize)||void 0===s||null===(n=s[0])||void 0===n?void 0:n.inlineSize)||0)}))}));return re.current&&e.observe(re.current),function(){e.disconnect()}}}),[v]),R?j.jsxs(j.Fragment,{children:[j.jsx(i.TextInputNext,{value:U,inputContainerRef:s,inputRef:re,label:r,onFocus:te,onBlur:ue,className:d,testId:p,suffix:j.jsx(m.CalendarThreeIcon,{}),placeholder:ce?"":f,onChange:ie,readOnly:P,clearable:w,focusOnClear:D,labelPlacement:S,size:N,elementsClassNames:le,htmlAttributes:me}),j.jsx(a.Popper,{anchorEl:re.current,open:ce,placement:"top-start",className:l.popper,modifiers:h,children:j.jsx("div",{className:b.default(l.rangeOverlay,y[N]),style:{width:ne},children:j.jsx("div",{style:{marginLeft:-Y},children:Array.isArray(n)&&2===n.length&&j.jsxs(j.Fragment,{children:[j.jsx("span",{className:b.default(l.rangePart,"startDate"===E&&l.rangePartActive),onClick:function(){return z("startDate")},children:O(n[0],B)})," - ",j.jsx("span",{className:b.default(l.rangePart,"endDate"===E&&l.rangePartActive),onClick:function(){return z("endDate")},children:O(n[1],B)})]})})})})]}):j.jsx(t.TextInput,{value:U,ref:s,label:r,onFocus:c,onBlur:ue,forceLabelShrink:T,className:d,testId:p,suffix:j.jsx(m.CalendarThreeIcon,{}),placeholder:f,onChange:ie,readOnly:P,onClear:w?ae:void 0,focusOnClear:D})}));exports.Input=P;
 //# sourceMappingURL=Input.js.map

package/cjs-bundle/componentsV2/DatePicker/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../../src/componentsV2/DatePicker/Input/Input.tsx"],"sourcesContent":["import {\n  FocusEventHandler,\n  forwardRef,\n  ReactNode,\n  UIEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport moment from 'moment';\nimport classNames from 'classnames';\n\nimport { TextInputNext, TextInputNextProps } from '../../TextInputNext';\nimport { TextInput } from '../../TextInput';\nimport {\n  autocompleteValue,\n  DatePickerChangeHandler,\n  DatePickerType,\n  getDefaultFormat,\n  getMaxDate,\n  getMinDate,\n  RangeSelectionStep,\n  InputParseFormats,\n} from '../utils';\nimport { Popper } from '../../Popper';\n\nimport styles from './Input.scss';\n\nimport { CalendarThreeIcon } from '~/icons';\n\nexport type InputProps = {\n  value?: Date | [Date | undefined, Date | undefined];\n  setValue?: (value: Date | [Date, Date] | undefined) => void;\n  label?: ReactNode;\n  placeholder?: string;\n  open: () => void;\n  type: DatePickerType;\n  format?: string;\n  range?: boolean;\n  rangeStep?: RangeSelectionStep;\n  setRangeStep: (step: RangeSelectionStep) => void;\n  readOnly?: boolean;\n  focusOnClear?: boolean;\n  labelPlacement?: TextInputNextProps['labelPlacement'];\n  size?: TextInputNextProps['size'];\n  elementsClassNames?: TextInputNextProps['elementsClassNames'];\n  clearable?: TextInputNextProps['clearable'];\n\n  className?: string;\n  testId?: string;\n\n  // Remove when next becomes baseline\n  isOpen: boolean;\n  isNext: boolean;\n};\n\nconst rangeOverlayPopperModifiers = {\n  flip: {\n    enabled: false,\n  },\n};\n\nconst RangeSeparator = ' - ';\n\nconst formatValuePart = (value: Date | undefined, format: string) =>\n  value ? moment(value).format(format) : format;\n\nconst formatValue = (value: InputProps['value'], format: string) =>\n  (Array.isArray(value) ? value : [value])\n    .filter(item => !!item)\n    .map(item => formatValuePart(item, format))\n    .join(RangeSeparator);\n\nconst parseStringDate = (value: string, format: string, type: DatePickerType) => {\n  const parsedMoment = moment(value, [format, ...(InputParseFormats[type] || [])], true);\n\n  return parsedMoment.isValid() ? parsedMoment.toDate() : undefined;\n};\n\nconst SizeToOverlayClassMap: Record<Required<TextInputNextProps>['size'], string> = {\n  small: styles.small,\n  medium: styles.medium,\n  large: styles.large,\n};\n\nexport const Input = forwardRef<HTMLDivElement, InputProps>(\n  (\n    {\n      value,\n      label,\n      open,\n      className,\n      testId,\n      format: propsFormat,\n      placeholder,\n      range,\n      readOnly,\n      type,\n      setValue,\n      focusOnClear,\n      labelPlacement,\n      size = 'small',\n      elementsClassNames: propsElementsClassNames,\n      isNext,\n      isOpen,\n      clearable,\n      rangeStep,\n      setRangeStep,\n    },\n    ref\n  ) => {\n    const format = propsFormat || getDefaultFormat(type, range);\n    const formattedValue = formatValue(value, format);\n    const [inputValue, setInputValue] = useState(formattedValue);\n    const [prevValue, setPrevValue] = useState(value);\n    const prevInputValueRef = useRef(inputValue);\n    const [inputScroll, setinputScroll] = useState(0);\n    const [inputWidth, setInputWidth] = useState(0);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const showRangeOverlay = !!range && inputValue === formattedValue && isOpen;\n\n    // Value changed - reconstructing input value\n    if (prevValue !== value) {\n      setInputValue(formattedValue);\n      setPrevValue(value);\n      prevInputValueRef.current = formattedValue;\n    }\n\n    const onChange = useCallback(\n      (typedValue: string) => {\n        if (typedValue.trim() === '') {\n          setValue?.(undefined);\n          setInputValue('');\n          prevInputValueRef.current = '';\n          return;\n        }\n\n        const newValue = autocompleteValue({\n          type,\n          range,\n          value: typedValue,\n          prevValue: prevInputValueRef.current,\n        });\n\n        prevInputValueRef.current = newValue;\n\n        setInputValue(newValue);\n        if (range) {\n          // Splitting by hyphen, or en dash, or em dash\n          const dateParts = newValue\n            .split(/[-–—]/)\n            .map(part => parseStringDate(part.trim(), format, type))\n            .filter(part => !!part);\n\n          if (dateParts.length === 2) {\n            const minDate = getMinDate(dateParts[0], dateParts[1]);\n            const maxDate = getMaxDate(dateParts[0], dateParts[1]);\n\n            if (minDate && maxDate) {\n              (setValue as DatePickerChangeHandler<true>)?.([minDate, maxDate]);\n            }\n          }\n        } else {\n          const maybeDate = parseStringDate(newValue, format, type);\n\n          if (maybeDate) {\n            (setValue as DatePickerChangeHandler<false>)?.(maybeDate);\n          }\n        }\n      },\n      [format, range, setValue, type]\n    );\n\n    const onFocus = useCallback<FocusEventHandler<HTMLInputElement>>(\n      e => {\n        e.target.select();\n        open();\n      },\n      [open]\n    );\n\n    const onBlur = useCallback(() => {\n      setInputValue(formatValue(value, format));\n      prevInputValueRef.current = '';\n    }, [value, format]);\n\n    const onClear = useCallback(() => {\n      setValue?.(undefined);\n      setInputValue('');\n    }, [setValue]);\n\n    const elementsClassNames = useMemo(\n      () => ({\n        ...propsElementsClassNames,\n        prefix: classNames(propsElementsClassNames?.prefix, showRangeOverlay && styles.prefix),\n        input: classNames(\n          propsElementsClassNames?.input,\n          showRangeOverlay && styles.rangeDefaultValue\n        ),\n        inputContainer: classNames(propsElementsClassNames?.inputContainer, styles.inputContainer),\n      }),\n      [showRangeOverlay, propsElementsClassNames]\n    );\n\n    const htmlAttributes = useMemo<{ onScroll: UIEventHandler<HTMLInputElement> } | undefined>(\n      () =>\n        range\n          ? {\n              onScroll: e => {\n                setinputScroll(e.currentTarget.scrollLeft);\n              },\n            }\n          : undefined,\n      [range]\n    );\n\n    useEffect(() => {\n      if (!range) {\n        return undefined;\n      }\n\n      const resizeObserver = new ResizeObserver(entries => {\n        entries.forEach(entry => setInputWidth(entry.borderBoxSize?.[0]?.inlineSize || 0));\n      });\n\n      if (inputRef.current) {\n        resizeObserver.observe(inputRef.current);\n      }\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [range]);\n\n    if (isNext) {\n      return (\n        <>\n          <TextInputNext\n            value={inputValue}\n            inputContainerRef={ref}\n            inputRef={inputRef}\n            label={label}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            className={className}\n            testId={testId}\n            suffix={<CalendarThreeIcon />}\n            placeholder={placeholder}\n            onChange={onChange}\n            readOnly={readOnly}\n            clearable={clearable}\n            focusOnClear={focusOnClear}\n            labelPlacement={labelPlacement}\n            size={size}\n            elementsClassNames={elementsClassNames}\n            htmlAttributes={htmlAttributes}\n          />\n\n          <Popper\n            anchorEl={inputRef.current}\n            open={showRangeOverlay}\n            placement=\"top-start\"\n            className={styles.popper}\n            modifiers={rangeOverlayPopperModifiers}\n          >\n            <div\n              className={classNames(styles.rangeOverlay, SizeToOverlayClassMap[size])}\n              style={{ width: inputWidth }}\n            >\n              <div style={{ marginLeft: -inputScroll }}>\n                {Array.isArray(value) && value.length === 2 && (\n                  <>\n                    <span\n                      className={classNames(\n                        styles.rangePart,\n\n                        rangeStep === 'startDate' && styles.rangePartActive\n                      )}\n                      onClick={() => setRangeStep('startDate')}\n                    >\n                      {formatValuePart(value[0], format)}\n                    </span>\n                    {RangeSeparator}\n                    <span\n                      className={classNames(\n                        styles.rangePart,\n                        rangeStep === 'endDate' && styles.rangePartActive\n                      )}\n                      onClick={() => setRangeStep('endDate')}\n                    >\n                      {formatValuePart(value[1], format)}\n                    </span>\n                  </>\n                )}\n              </div>\n            </div>\n          </Popper>\n        </>\n      );\n    }\n\n    return (\n      <TextInput\n        value={inputValue}\n        ref={ref as never}\n        label={label}\n        onFocus={open}\n        onBlur={onBlur}\n        forceLabelShrink={isOpen}\n        className={className}\n        testId={testId}\n        suffix={<CalendarThreeIcon />}\n        placeholder={placeholder}\n        onChange={onChange}\n        readOnly={readOnly}\n        onClear={clearable ? onClear : undefined}\n        focusOnClear={focusOnClear}\n      />\n    );\n  }\n);\n"],"names":["rangeOverlayPopperModifiers","flip","enabled","formatValuePart","value","format","moment","formatValue","Array","isArray","filter","item","map","join","parseStringDate","type","parsedMoment","concat","_toConsumableArray","InputParseFormats","isValid","toDate","undefined","SizeToOverlayClassMap","small","styles","medium","large","Input","forwardRef","_ref","ref","label","open","className","testId","propsFormat","placeholder","range","readOnly","setValue","focusOnClear","labelPlacement","_ref$size","size","propsElementsClassNames","elementsClassNames","isNext","isOpen","clearable","rangeStep","setRangeStep","getDefaultFormat","formattedValue","useState","_useState2","_slicedToArray","_useState","inputValue","setInputValue","_useState4","_useState3","prevValue","setPrevValue","prevInputValueRef","useRef","_useState6","_useState5","inputScroll","setinputScroll","_useState8","_useState7","inputWidth","setInputWidth","inputRef","showRangeOverlay","current","onChange","useCallback","typedValue","trim","newValue","autocompleteValue","dateParts","split","part","length","minDate","getMinDate","maxDate","getMaxDate","maybeDate","onFocus","e","target","select","onBlur","onClear","useMemo","_objectSpread","prefix","classNames","input","rangeDefaultValue","inputContainer","htmlAttributes","onScroll","currentTarget","scrollLeft","useEffect","resizeObserver","ResizeObserver","entries","forEach","entry","_entry$borderBoxSize","_entry$borderBoxSize$","borderBoxSize","inlineSize","observe","disconnect","_jsxs","_Fragment","children","_jsx","TextInputNext","inputContainerRef","suffix","CalendarThreeIcon","Popper","anchorEl","placement","popper","modifiers","jsx","rangeOverlay","style","width","marginLeft","jsxs","rangePart","rangePartActive","onClick","TextInput","forceLabelShrink"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../../../src/componentsV2/DatePicker/Input/Input.tsx"],"sourcesContent":["import {\n  FocusEventHandler,\n  forwardRef,\n  ReactNode,\n  UIEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport moment from 'moment';\nimport classNames from 'classnames';\n\nimport { TextInputNext, TextInputNextProps } from '../../TextInputNext';\nimport { TextInput } from '../../TextInput';\nimport {\n  autocompleteValue,\n  DatePickerChangeHandler,\n  DatePickerType,\n  getDefaultFormat,\n  getMaxDate,\n  getMinDate,\n  RangeSelectionStep,\n  InputParseFormats,\n} from '../utils';\nimport { Popper } from '../../Popper';\n\nimport styles from './Input.scss';\n\nimport { CalendarThreeIcon } from '~/icons';\n\nexport type InputProps = {\n  value?: Date | [Date | undefined, Date | undefined];\n  setValue?: (value: Date | [Date, Date] | undefined) => void;\n  label?: ReactNode;\n  placeholder?: string;\n  open: () => void;\n  type: DatePickerType;\n  format?: string;\n  range?: boolean;\n  rangeStep?: RangeSelectionStep;\n  setRangeStep: (step: RangeSelectionStep) => void;\n  readOnly?: boolean;\n  focusOnClear?: boolean;\n  labelPlacement?: TextInputNextProps['labelPlacement'];\n  size?: TextInputNextProps['size'];\n  elementsClassNames?: TextInputNextProps['elementsClassNames'];\n  clearable?: TextInputNextProps['clearable'];\n\n  className?: string;\n  testId?: string;\n\n  // Remove when next becomes baseline\n  isOpen: boolean;\n  isNext: boolean;\n};\n\nconst rangeOverlayPopperModifiers = {\n  flip: {\n    enabled: false,\n  },\n};\n\nconst RangeSeparator = ' - ';\n\nconst formatValuePart = (value: Date | undefined, format: string) =>\n  value ? moment(value).format(format) : format;\n\nconst formatValue = (value: InputProps['value'], format: string) =>\n  (Array.isArray(value) ? value : [value])\n    .filter(item => !!item)\n    .map(item => formatValuePart(item, format))\n    .join(RangeSeparator);\n\nconst parseStringDate = (value: string, format: string, type: DatePickerType) => {\n  const parsedMoment = moment(value, [format, ...(InputParseFormats[type] || [])], true);\n\n  return parsedMoment.isValid() ? parsedMoment.toDate() : undefined;\n};\n\nconst SizeToOverlayClassMap: Record<Required<TextInputNextProps>['size'], string> = {\n  small: styles.small,\n  medium: styles.medium,\n  large: styles.large,\n};\n\nexport const Input = forwardRef<HTMLDivElement, InputProps>(\n  (\n    {\n      value,\n      label,\n      open,\n      className,\n      testId,\n      format: propsFormat,\n      placeholder,\n      range,\n      readOnly,\n      type,\n      setValue,\n      focusOnClear,\n      labelPlacement,\n      size = 'small',\n      elementsClassNames: propsElementsClassNames,\n      isNext,\n      isOpen,\n      clearable,\n      rangeStep,\n      setRangeStep,\n    },\n    ref\n  ) => {\n    const format = propsFormat || getDefaultFormat(type, range);\n    const formattedValue = formatValue(value, format);\n    const [inputValue, setInputValue] = useState(formattedValue);\n    const [prevValue, setPrevValue] = useState(value);\n    const prevInputValueRef = useRef(inputValue);\n    const [inputScroll, setinputScroll] = useState(0);\n    const [inputWidth, setInputWidth] = useState(0);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const showRangeOverlay = !!range && inputValue === formattedValue && isOpen;\n\n    // Value changed - reconstructing input value\n    if (prevValue !== value) {\n      setInputValue(formattedValue);\n      setPrevValue(value);\n      prevInputValueRef.current = formattedValue;\n    }\n\n    const onChange = useCallback(\n      (typedValue: string) => {\n        if (typedValue.trim() === '') {\n          setValue?.(undefined);\n          setInputValue('');\n          prevInputValueRef.current = '';\n          return;\n        }\n\n        const newValue = autocompleteValue({\n          type,\n          range,\n          value: typedValue,\n          prevValue: prevInputValueRef.current,\n        });\n\n        prevInputValueRef.current = newValue;\n\n        setInputValue(newValue);\n        if (range) {\n          // Splitting by hyphen, or en dash, or em dash\n          const dateParts = newValue\n            .split(/[-–—]/)\n            .map(part => parseStringDate(part.trim(), format, type))\n            .filter(part => !!part);\n\n          if (dateParts.length === 2) {\n            const minDate = getMinDate(dateParts[0], dateParts[1]);\n            const maxDate = getMaxDate(dateParts[0], dateParts[1]);\n\n            if (minDate && maxDate) {\n              (setValue as DatePickerChangeHandler<true>)?.([minDate, maxDate]);\n            }\n          }\n        } else {\n          const maybeDate = parseStringDate(newValue, format, type);\n\n          if (maybeDate) {\n            (setValue as DatePickerChangeHandler<false>)?.(maybeDate);\n          }\n        }\n      },\n      [format, range, setValue, type]\n    );\n\n    const onFocus = useCallback<FocusEventHandler<HTMLInputElement>>(\n      e => {\n        e.target.select();\n        open();\n      },\n      [open]\n    );\n\n    const onBlur = useCallback(() => {\n      setInputValue(formatValue(value, format));\n      prevInputValueRef.current = '';\n    }, [value, format]);\n\n    const onClear = useCallback(() => {\n      setValue?.(undefined);\n      setInputValue('');\n    }, [setValue]);\n\n    const elementsClassNames = useMemo(\n      () => ({\n        ...propsElementsClassNames,\n        prefix: classNames(propsElementsClassNames?.prefix, showRangeOverlay && styles.prefix),\n        input: classNames(\n          propsElementsClassNames?.input,\n          showRangeOverlay && styles.rangeDefaultValue\n        ),\n        inputContainer: classNames(propsElementsClassNames?.inputContainer, styles.inputContainer),\n      }),\n      [showRangeOverlay, propsElementsClassNames]\n    );\n\n    const htmlAttributes = useMemo<{ onScroll: UIEventHandler<HTMLInputElement> } | undefined>(\n      () =>\n        range\n          ? {\n              onScroll: e => {\n                setinputScroll(e.currentTarget.scrollLeft);\n              },\n            }\n          : undefined,\n      [range]\n    );\n\n    useEffect(() => {\n      if (!range) {\n        return undefined;\n      }\n\n      const resizeObserver = new ResizeObserver(entries => {\n        entries.forEach(entry => setInputWidth(entry.borderBoxSize?.[0]?.inlineSize || 0));\n      });\n\n      if (inputRef.current) {\n        resizeObserver.observe(inputRef.current);\n      }\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [range]);\n\n    if (isNext) {\n      return (\n        <>\n          <TextInputNext\n            value={inputValue}\n            inputContainerRef={ref}\n            inputRef={inputRef}\n            label={label}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            className={className}\n            testId={testId}\n            suffix={<CalendarThreeIcon />}\n            placeholder={showRangeOverlay ? '' : placeholder}\n            onChange={onChange}\n            readOnly={readOnly}\n            clearable={clearable}\n            focusOnClear={focusOnClear}\n            labelPlacement={labelPlacement}\n            size={size}\n            elementsClassNames={elementsClassNames}\n            htmlAttributes={htmlAttributes}\n          />\n\n          <Popper\n            anchorEl={inputRef.current}\n            open={showRangeOverlay}\n            placement=\"top-start\"\n            className={styles.popper}\n            modifiers={rangeOverlayPopperModifiers}\n          >\n            <div\n              className={classNames(styles.rangeOverlay, SizeToOverlayClassMap[size])}\n              style={{ width: inputWidth }}\n            >\n              <div style={{ marginLeft: -inputScroll }}>\n                {Array.isArray(value) && value.length === 2 && (\n                  <>\n                    <span\n                      className={classNames(\n                        styles.rangePart,\n\n                        rangeStep === 'startDate' && styles.rangePartActive\n                      )}\n                      onClick={() => setRangeStep('startDate')}\n                    >\n                      {formatValuePart(value[0], format)}\n                    </span>\n                    {RangeSeparator}\n                    <span\n                      className={classNames(\n                        styles.rangePart,\n                        rangeStep === 'endDate' && styles.rangePartActive\n                      )}\n                      onClick={() => setRangeStep('endDate')}\n                    >\n                      {formatValuePart(value[1], format)}\n                    </span>\n                  </>\n                )}\n              </div>\n            </div>\n          </Popper>\n        </>\n      );\n    }\n\n    return (\n      <TextInput\n        value={inputValue}\n        ref={ref as never}\n        label={label}\n        onFocus={open}\n        onBlur={onBlur}\n        forceLabelShrink={isOpen}\n        className={className}\n        testId={testId}\n        suffix={<CalendarThreeIcon />}\n        placeholder={placeholder}\n        onChange={onChange}\n        readOnly={readOnly}\n        onClear={clearable ? onClear : undefined}\n        focusOnClear={focusOnClear}\n      />\n    );\n  }\n);\n"],"names":["rangeOverlayPopperModifiers","flip","enabled","formatValuePart","value","format","moment","formatValue","Array","isArray","filter","item","map","join","parseStringDate","type","parsedMoment","concat","_toConsumableArray","InputParseFormats","isValid","toDate","undefined","SizeToOverlayClassMap","small","styles","medium","large","Input","forwardRef","_ref","ref","label","open","className","testId","propsFormat","placeholder","range","readOnly","setValue","focusOnClear","labelPlacement","_ref$size","size","propsElementsClassNames","elementsClassNames","isNext","isOpen","clearable","rangeStep","setRangeStep","getDefaultFormat","formattedValue","useState","_useState2","_slicedToArray","_useState","inputValue","setInputValue","_useState4","_useState3","prevValue","setPrevValue","prevInputValueRef","useRef","_useState6","_useState5","inputScroll","setinputScroll","_useState8","_useState7","inputWidth","setInputWidth","inputRef","showRangeOverlay","current","onChange","useCallback","typedValue","trim","newValue","autocompleteValue","dateParts","split","part","length","minDate","getMinDate","maxDate","getMaxDate","maybeDate","onFocus","e","target","select","onBlur","onClear","useMemo","_objectSpread","prefix","classNames","input","rangeDefaultValue","inputContainer","htmlAttributes","onScroll","currentTarget","scrollLeft","useEffect","resizeObserver","ResizeObserver","entries","forEach","entry","_entry$borderBoxSize","_entry$borderBoxSize$","borderBoxSize","inlineSize","observe","disconnect","_jsxs","_Fragment","children","_jsx","TextInputNext","inputContainerRef","suffix","CalendarThreeIcon","Popper","anchorEl","placement","popper","modifiers","jsx","rangeOverlay","style","width","marginLeft","jsxs","rangePart","rangePartActive","onClick","TextInput","forceLabelShrink"],"mappings":"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"}

package/cjs-bundle/componentsV2/DatePicker/TimePicker/TimePicker.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s=require("@babel/runtime/helpers/defineProperty"),e=require("@babel/runtime/helpers/slicedToArray"),o=require("react"),n=require("classnames"),c=require("moment-timezone"),r=require("lodash"),i=require("../../TextInputNext/TextInputNext.js"),t=require("../../Text/Text.js"),u=require("../../ToggleButtons/ToggleButtons.js"),a=require("../utils.js"),l=require("../../Button/Button.js"),m=require("./TimePicker.scss.js"),d=require("../../../icons/iconParkIcons.js");require("../../../icons/customIcons/icons/AddMessage.js"),require("../../../icons/customIcons/icons/DragOne.js"),require("../../../icons/customIcons/icons/Attention.js"),require("../../../icons/customIcons/icons/Collapse.js"),require("../../../icons/customIcons/icons/Dashboard.js"),require("../../../icons/customIcons/icons/Expand.js"),require("../../../icons/customIcons/icons/FolderClosed.js"),require("../../../icons/customIcons/icons/FolderClosedFilled.js"),require("../../../icons/customIcons/icons/FolderOpened.js"),require("../../../icons/customIcons/icons/GreaterOrEqual.js"),require("../../../icons/customIcons/icons/LessOrEqual.js"),require("../../../icons/customIcons/icons/Search.js"),require("../../../icons/customIcons/icons/SearchOne.js"),require("../../../icons/customIcons/icons/Wellhub.js"),require("../../../icons/customIcons/icons/MultiRuler.js"),require("../../../icons/customIcons/icons/Checkbox.js"),require("../../../icons/customIcons/icons/CheckboxChecked.js"),require("../../../icons/customIcons/icons/CheckboxIndeterminate.js"),require("../../../icons/customIcons/icons/Radio.js"),require("../../../icons/customIcons/icons/RadioChecked.js"),require("../../../icons/customIcons/icons/SimulFrac.js"),require("../../../icons/customIcons/icons/ZipperFrac.js"),require("../../../icons/customIcons/icons/CautionFilled.js"),require("../../../icons/customIcons/icons/InfoRounded.js"),require("../../../icons/customIcons/icons/FlameFilled.js"),require("../../../icons/customIcons/icons/MoreApp.js"),require("../../../icons/customIcons/icons/Pad.js"),require("../../../icons/customIcons/icons/DrilloutUnit.js"),require("../../../icons/customIcons/icons/FracFleet.js"),require("../../../icons/customIcons/icons/Global.js"),require("../../../icons/customIcons/icons/Program.js"),require("../../../icons/customIcons/icons/Rig.js"),require("../../../icons/customIcons/icons/Well.js"),require("../../../icons/customIcons/icons/Gap.js"),require("../../../icons/customIcons/icons/Pin.js"),require("../../../icons/customIcons/icons/PinOne.js"),require("../../../icons/customIcons/icons/PinOneCrossed.js"),require("../../../icons/customIcons/icons/CloseOneFilled.js"),require("../../../icons/customIcons/icons/AttentionFilled.js"),require("../../../icons/customIcons/icons/CheckOneFilled.js"),require("../../../icons/customIcons/icons/Archive.js"),require("../../../icons/customIcons/icons/ArchiveCancel.js"),require("../../../icons/customIcons/icons/Unarchive.js"),require("../../../icons/customIcons/icons/Archived.js"),require("../../../icons/customIcons/icons/InterventionUnit.js"),require("../../../icons/customIcons/icons/CloudDelete.js"),require("../../../icons/customIcons/icons/Lasso.js"),require("../../../icons/customIcons/icons/Radius.js"),require("../../../icons/customIcons/icons/ErrorOps.js"),require("../../../icons/customIcons/icons/DataTypeOps.js"),require("../../../icons/customIcons/icons/FalsePositiveOps.js"),require("../../../icons/customIcons/icons/CalibrationOps.js"),require("../../../icons/customIcons/icons/CriticalOps.js"),require("../../../icons/customIcons/icons/Company.js"),require("../../../icons/customIcons/icons/ArchiveOne.js"),require("../../../icons/customIcons/icons/ParseBotFusion.js"),require("../../../icons/customIcons/icons/Connect.js"),require("../../../icons/customIcons/icons/PuzzleOne.js"),require("../../../icons/customIcons/icons/Feed.js"),require("../../../icons/customIcons/icons/Prompt.js"),require("../../../icons/customIcons/icons/Companies.js"),require("../../../icons/customIcons/icons/ClipboardAi.js"),require("../../../icons/customIcons/icons/Key.js"),require("../../../icons/customIcons/icons/AtSignCrossed.js"),require("../../../icons/customIcons/icons/MappingManual.js"),require("../../../icons/customIcons/icons/Mapping.js"),require("../../../icons/customIcons/icons/Metrics.js"),require("../../../icons/customIcons/icons/Drops.js"),require("../../../icons/customIcons/icons/ClipboardSearch.js"),require("../../../icons/customIcons/icons/Template.js"),require("../../../icons/customIcons/icons/ClipboardMetrics.js"),require("../../../icons/customIcons/icons/ClipboardBuilder.js"),require("../../../icons/customIcons/icons/UnitConversion.js"),require("../../../icons/customIcons/icons/NPT.js"),require("../../../icons/customIcons/icons/GuidedFrac.js");var j=require("react/jsx-runtime");function q(s){return s&&"object"==typeof s&&"default"in s?s:{default:s}}var I=q(s),p=q(e),f=q(n),h=q(c);function v(s,e){var o=Object.keys(s);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(s);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(s,e).enumerable}))),o.push.apply(o,n)}return o}function b(s){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?v(Object(o),!0).forEach((function(e){I.default(s,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(o)):v(Object(o)).forEach((function(e){Object.defineProperty(s,e,Object.getOwnPropertyDescriptor(o,e))}))}return s}var g=[{value:"am",label:"AM"},{value:"pm",label:"PM"}],C=function(s){return s.replace(/[^\d]/g,"").substring(0,2)},x=function(s){return Number(s)>=0&&Number(s)<=12},O=function(s){return Number(s)>=0&&Number(s)<60},y=O,T=function(s){return s.getTime()-h.default(s).startOf("day").toDate().getTime()},N=function(s){return void 0!==s?r.padStart(String(s),2,"0"):""},P=function(s){return"12"===s?"00":s};exports.TimePicker=function(s){var e=s.value,n=s.onChange,c=s.minDate,r=s.maxDate,q=s.saveTime,I=s.goToToday,v=s.clear,D=!e,F=o.useRef(null),k=o.useRef(null),S=o.useRef(null),M=o.useRef(),A=o.useMemo((function(){var s=e?T(e)>=432e5?"pm":"am":void 0,o="pm"===s?12:0,n=e?e.getHours()-o:void 0;return{hours:N(void 0!==n&&12===n?0:n),minutes:N(null==e?void 0:e.getMinutes()),seconds:N(null==e?void 0:e.getSeconds()),partOfDay:s}}),[e]),B=o.useState(A.hours),R=p.default(B,2),z=R[0],w=R[1],E=o.useState(A.minutes),H=p.default(E,2),G=H[0],U=H[1],L=o.useState(A.seconds),W=p.default(L,2),_=W[0],K=W[1];o.useEffect((function(){M.current!==F.current&&w(A.hours),M.current!==k.current&&U(A.minutes),M.current!==S.current&&K(A.seconds)}),[A.hours,A.minutes,A.seconds]);var Z=o.useMemo((function(){var s=a.isSameDay(c,e)&&h.default(c).format("hh:mm:ss A"),o=a.isSameDay(r,e)&&h.default(r).format("hh:mm:ss A");return s&&o?"In ".concat(s," - ").concat(o," range"):s?"Can’t be earlier than ".concat(s):o?"Can’t be later than ".concat(o):void 0}),[r,c,e]),J=o.useMemo((function(){return g.map((function(s){var o="am"===s.value&&!!c&&a.isSameDay(e,c)&&T(c)>=432e5,n="pm"===s.value&&!!r&&a.isSameDay(e,r)&&T(r)<432e5;return b(b({},s),{},{disabled:D||o||n})}))}),[D,r,c,e]),Q=o.useCallback((function(s,o){if(e){var c=new Date(e);if("hours"===s&&x(o)){var r="pm"===A.partOfDay?12:0;c.setHours(r+Number(o))}else if("minutes"===s&&O(o))c.setMinutes(Number(o));else if("seconds"===s&&y(o))c.setSeconds(Number(o));else if("partOfDay"===s&&("am"===o||"pm"===o)){var i=c.getHours()%12;c.setHours(("pm"===o?12:0)+i)}Math.floor(c.getTime()/1e3)!==Math.floor(e.getTime()/1e3)&&n(c)}}),[A.partOfDay,n,e]),V=o.useCallback((function(s){s.target.select(),M.current=s.target}),[]),X=o.useCallback((function(s){var e=C(s.target.value);if(s.target===F.current){var o=P(e),n=x(o)?N(o):A.hours;w(n),Q("hours",n)}if(s.target===k.current){var c=O(e)?N(e):A.minutes;U(c),Q("minutes",c)}if(s.target===S.current){var r=y(e)?N(e):A.seconds;K(r),Q("seconds",r)}M.current=void 0}),[A.hours,A.minutes,A.seconds,Q]),Y=o.useCallback((function(s){var e,o=C(s),n=P(o);(w(o),2===o.length&&x(o))&&(Q("hours",n),null===(e=k.current)||void 0===e||e.focus())}),[Q]),$=o.useCallback((function(s){var e,o=C(s);(U(o),2===o.length&&O(o))&&(Q("minutes",o),null===(e=S.current)||void 0===e||e.focus())}),[Q]),ss=o.useCallback((function(s){var e=C(s);K(e),y(e)&&Q("seconds",e)}),[Q]),es=o.useCallback((function(s){Q("partOfDay",s)}),[Q]),os=Number(null==e?void 0:e.getTime())>Number(null==r?void 0:r.getTime())||Number(null==e?void 0:e.getTime())<Number(null==c?void 0:c.getTime()),ns=!x(z)||os,cs=!O(G)||os,rs=!y(_)||os;return j.jsxs(j.Fragment,{children:[j.jsxs("div",{className:f.default(m.timePicker),children:[j.jsxs(t.Text,{className:m.header,size:14,children:[j.jsx("span",{className:f.default(m.headerText,D&&m.disabled),children:"Time"}),Z&&j.jsxs(j.Fragment,{children:[j.jsx(d.InfoIcon,{className:m.constraintIcon,size:16}),Z]})]}),j.jsx(i.TextInputNext,{placeholder:"HH",className:m.input,disabled:D,value:z,onChange:Y,status:ns?"error":void 0,inputRef:F,onFocus:V,onBlur:X}),j.jsx(t.Text,{color:"T9",size:14,children:":"}),j.jsx(i.TextInputNext,{placeholder:"MM",className:m.input,disabled:D,value:G,onChange:$,status:cs?"error":void 0,inputRef:k,onFocus:V,onBlur:X}),j.jsx(t.Text,{color:"T9",size:14,children:":"}),j.jsx(i.TextInputNext,{placeholder:"SS",className:m.input,disabled:D,value:_,onChange:ss,status:rs?"error":void 0,inputRef:S,onFocus:V,onBlur:X}),j.jsx(u.ToggleButtons,{options:J,className:m.tabs,size:"small",value:A.partOfDay,onChange:es})]}),j.jsxs("div",{className:m.footer,children:[I&&j.jsx(l.Button,{onClick:I,type:"tertiary",size:"small",children:"Today"}),j.jsxs("div",{className:m.actions,children:[v&&j.jsx(l.Button,{onClick:v,type:"tertiary",size:"small",disabled:!e,children:"Clear"}),j.jsx(l.Button,{onClick:q,type:"secondary",size:"small",disabled:!e||ns||cs||rs,children:"Save"})]})]})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s=require("@babel/runtime/helpers/slicedToArray"),e=require("react"),o=require("classnames"),n=require("moment-timezone"),c=require("lodash"),i=require("../../TextInputNext/TextInputNext.js"),r=require("../../Text/Text.js"),u=require("../utils.js"),t=require("../../Button/Button.js"),a=require("./TimePicker.scss.js"),l=require("../../../icons/iconParkIcons.js");require("../../../icons/customIcons/icons/AddMessage.js"),require("../../../icons/customIcons/icons/DragOne.js"),require("../../../icons/customIcons/icons/Attention.js"),require("../../../icons/customIcons/icons/Collapse.js"),require("../../../icons/customIcons/icons/Dashboard.js"),require("../../../icons/customIcons/icons/Expand.js"),require("../../../icons/customIcons/icons/FolderClosed.js"),require("../../../icons/customIcons/icons/FolderClosedFilled.js"),require("../../../icons/customIcons/icons/FolderOpened.js"),require("../../../icons/customIcons/icons/GreaterOrEqual.js"),require("../../../icons/customIcons/icons/LessOrEqual.js"),require("../../../icons/customIcons/icons/Search.js"),require("../../../icons/customIcons/icons/SearchOne.js"),require("../../../icons/customIcons/icons/Wellhub.js"),require("../../../icons/customIcons/icons/MultiRuler.js"),require("../../../icons/customIcons/icons/Checkbox.js"),require("../../../icons/customIcons/icons/CheckboxChecked.js"),require("../../../icons/customIcons/icons/CheckboxIndeterminate.js"),require("../../../icons/customIcons/icons/Radio.js"),require("../../../icons/customIcons/icons/RadioChecked.js"),require("../../../icons/customIcons/icons/SimulFrac.js"),require("../../../icons/customIcons/icons/ZipperFrac.js"),require("../../../icons/customIcons/icons/CautionFilled.js"),require("../../../icons/customIcons/icons/InfoRounded.js"),require("../../../icons/customIcons/icons/FlameFilled.js"),require("../../../icons/customIcons/icons/MoreApp.js"),require("../../../icons/customIcons/icons/Pad.js"),require("../../../icons/customIcons/icons/DrilloutUnit.js"),require("../../../icons/customIcons/icons/FracFleet.js"),require("../../../icons/customIcons/icons/Global.js"),require("../../../icons/customIcons/icons/Program.js"),require("../../../icons/customIcons/icons/Rig.js"),require("../../../icons/customIcons/icons/Well.js"),require("../../../icons/customIcons/icons/Gap.js"),require("../../../icons/customIcons/icons/Pin.js"),require("../../../icons/customIcons/icons/PinOne.js"),require("../../../icons/customIcons/icons/PinOneCrossed.js"),require("../../../icons/customIcons/icons/CloseOneFilled.js"),require("../../../icons/customIcons/icons/AttentionFilled.js"),require("../../../icons/customIcons/icons/CheckOneFilled.js"),require("../../../icons/customIcons/icons/Archive.js"),require("../../../icons/customIcons/icons/ArchiveCancel.js"),require("../../../icons/customIcons/icons/Unarchive.js"),require("../../../icons/customIcons/icons/Archived.js"),require("../../../icons/customIcons/icons/InterventionUnit.js"),require("../../../icons/customIcons/icons/CloudDelete.js"),require("../../../icons/customIcons/icons/Lasso.js"),require("../../../icons/customIcons/icons/Radius.js"),require("../../../icons/customIcons/icons/ErrorOps.js"),require("../../../icons/customIcons/icons/DataTypeOps.js"),require("../../../icons/customIcons/icons/FalsePositiveOps.js"),require("../../../icons/customIcons/icons/CalibrationOps.js"),require("../../../icons/customIcons/icons/CriticalOps.js"),require("../../../icons/customIcons/icons/Company.js"),require("../../../icons/customIcons/icons/ArchiveOne.js"),require("../../../icons/customIcons/icons/ParseBotFusion.js"),require("../../../icons/customIcons/icons/Connect.js"),require("../../../icons/customIcons/icons/PuzzleOne.js"),require("../../../icons/customIcons/icons/Feed.js"),require("../../../icons/customIcons/icons/Prompt.js"),require("../../../icons/customIcons/icons/Companies.js"),require("../../../icons/customIcons/icons/ClipboardAi.js"),require("../../../icons/customIcons/icons/Key.js"),require("../../../icons/customIcons/icons/AtSignCrossed.js"),require("../../../icons/customIcons/icons/MappingManual.js"),require("../../../icons/customIcons/icons/Mapping.js"),require("../../../icons/customIcons/icons/Metrics.js"),require("../../../icons/customIcons/icons/Drops.js"),require("../../../icons/customIcons/icons/ClipboardSearch.js"),require("../../../icons/customIcons/icons/Template.js"),require("../../../icons/customIcons/icons/ClipboardMetrics.js"),require("../../../icons/customIcons/icons/ClipboardBuilder.js"),require("../../../icons/customIcons/icons/UnitConversion.js"),require("../../../icons/customIcons/icons/NPT.js"),require("../../../icons/customIcons/icons/GuidedFrac.js");var m=require("react/jsx-runtime");function d(s){return s&&"object"==typeof s&&"default"in s?s:{default:s}}var j=d(s),q=d(o),I=d(n),p=function(s){return s.replace(/[^\d]/g,"").substring(0,2)},h=function(s){return Number(s)>=0&&Number(s)<=23},v=function(s){return Number(s)>=0&&Number(s)<60},f=v,C=function(s){return void 0!==s?c.padStart(String(s),2,"0"):""},b={input:a.inputElement};exports.TimePicker=function(s){var o=s.value,n=s.onChange,c=s.minDate,d=s.maxDate,x=s.saveTime,g=s.goToToday,T=s.clear,N=!o,F=e.useRef(null),k=e.useRef(null),M=e.useRef(null),O=e.useRef(),S=e.useMemo((function(){return{hours:C(null==o?void 0:o.getHours()),minutes:C(null==o?void 0:o.getMinutes()),seconds:C(null==o?void 0:o.getSeconds())}}),[o]),y=e.useState(S.hours),P=j.default(y,2),R=P[0],z=P[1],A=e.useState(S.minutes),D=j.default(A,2),B=D[0],H=D[1],E=e.useState(S.seconds),G=j.default(E,2),U=G[0],L=G[1];e.useEffect((function(){O.current!==F.current&&z(S.hours),O.current!==k.current&&H(S.minutes),O.current!==M.current&&L(S.seconds)}),[S.hours,S.minutes,S.seconds]);var W=e.useMemo((function(){var s=u.isSameDay(c,o)&&I.default(c).format("HH:mm:ss"),e=u.isSameDay(d,o)&&I.default(d).format("HH:mm:ss");return s&&e?"In ".concat(s," - ").concat(e," range"):s?"Can’t be earlier than ".concat(s):e?"Can’t be later than ".concat(e):void 0}),[d,c,o]),_=e.useCallback((function(s,e){if(o){var c=new Date(o);"hours"===s&&h(e)?c.setHours(Number(e)):"minutes"===s&&v(e)?c.setMinutes(Number(e)):"seconds"===s&&f(e)&&c.setSeconds(Number(e)),Math.floor(c.getTime()/1e3)!==Math.floor(o.getTime()/1e3)&&n(c)}}),[n,o]),w=e.useCallback((function(s){s.target.select(),O.current=s.target}),[]),K=e.useCallback((function(s){var e=p(s.target.value);if(s.target===F.current){var o=h(e)?C(e):S.hours;z(o),_("hours",o)}if(s.target===k.current){var n=v(e)?C(e):S.minutes;H(n),_("minutes",n)}if(s.target===M.current){var c=f(e)?C(e):S.seconds;L(c),_("seconds",c)}O.current=void 0}),[S.hours,S.minutes,S.seconds,_]),Z=e.useCallback((function(s){var e,o=p(s);(z(o),2===o.length&&h(o))&&(_("hours",o),null===(e=k.current)||void 0===e||e.focus())}),[_]),J=e.useCallback((function(s){var e,o=p(s);(H(o),2===o.length&&v(o))&&(_("minutes",o),null===(e=M.current)||void 0===e||e.focus())}),[_]),Q=e.useCallback((function(s){var e=p(s);L(e),f(e)&&_("seconds",e)}),[_]),V=Number(null==o?void 0:o.getTime())>Number(null==d?void 0:d.getTime())||Number(null==o?void 0:o.getTime())<Number(null==c?void 0:c.getTime()),X=!h(R)||V,Y=!v(B)||V,$=!f(U)||V;return m.jsxs(m.Fragment,{children:[m.jsxs("div",{className:q.default(a.timePicker),children:[m.jsx(r.Text,{color:N?"T9":"T1",size:14,className:a.header,children:"Time"}),m.jsx(i.TextInputNext,{placeholder:"HH",className:a.input,disabled:N,value:R,onChange:Z,status:X?"error":void 0,inputRef:F,onFocus:w,onBlur:K,elementsClassNames:b}),m.jsx(r.Text,{color:"T9",size:14,children:":"}),m.jsx(i.TextInputNext,{placeholder:"MM",className:a.input,disabled:N,value:B,onChange:J,status:Y?"error":void 0,inputRef:k,onFocus:w,onBlur:K,elementsClassNames:b}),m.jsx(r.Text,{color:"T9",size:14,children:":"}),m.jsx(i.TextInputNext,{placeholder:"SS",className:a.input,disabled:N,value:U,onChange:Q,status:$?"error":void 0,inputRef:M,onFocus:w,onBlur:K,elementsClassNames:b}),W&&m.jsxs(r.Text,{className:a.constraintText,size:12,children:[m.jsx(l.InfoIcon,{className:a.constraintIcon,size:16}),W]})]}),m.jsxs("div",{className:a.footer,children:[g&&m.jsx(t.Button,{onClick:g,type:"tertiary",size:"small",children:"Today"}),m.jsxs("div",{className:a.actions,children:[T&&m.jsx(t.Button,{onClick:T,type:"tertiary",size:"small",disabled:!o,children:"Clear"}),m.jsx(t.Button,{onClick:x,type:"secondary",size:"small",disabled:!o||X||Y||$,children:"Save"})]})]})]})};
 //# sourceMappingURL=TimePicker.js.map

package/cjs-bundle/componentsV2/DatePicker/TimePicker/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sources":["../../../../../src/componentsV2/DatePicker/TimePicker/TimePicker.tsx"],"sourcesContent":["import { FocusEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport moment from 'moment-timezone';\nimport { padStart } from 'lodash';\n\nimport { TextInputNext } from '../../TextInputNext';\nimport { Text } from '../../Text';\nimport { ToggleButtons } from '../../ToggleButtons';\nimport { isSameDay } from '../utils';\nimport { Button } from '../../Button';\n\nimport styles from './TimePicker.scss';\n\nimport { InfoIcon } from '~/icons';\n\ntype AmPm = 'am' | 'pm';\n\nconst HalfOfDayMs = 12 * 60 * 60 * 1000;\n\nconst ToggleButtonsOptions: { value: AmPm; label: string }[] = [\n  { value: 'am', label: 'AM' },\n  { value: 'pm', label: 'PM' },\n];\n\nexport type TimePickerProps = {\n  value?: Date;\n  onChange: (date: Date) => void;\n  saveTime: () => void;\n  maxDate?: Date;\n  minDate?: Date;\n\n  goToToday?: () => void;\n  clear?: () => void;\n};\n\nconst sanitize = (value: string) => value.replace(/[^\\d]/g, '').substring(0, 2);\nconst validateHours = (value?: string) => Number(value) >= 0 && Number(value) <= 12;\nconst validateMinutes = (value?: string) => Number(value) >= 0 && Number(value) < 60;\nconst validateSeconds = validateMinutes;\n\nconst getOffsetFromDayStart = (date: Date) => {\n  return date.getTime() - moment(date).startOf('day').toDate().getTime();\n};\n\nconst formatTimePart = (part?: string | number) =>\n  part !== undefined ? padStart(String(part), 2, '0') : '';\n\nconst getPartOfDay = (date: Date) => {\n  return getOffsetFromDayStart(date) >= HalfOfDayMs ? 'pm' : 'am';\n};\n\nconst getActualHours = (sanitized: string) => (sanitized === '12' ? '00' : sanitized);\n\nexport const TimePicker = ({\n  value,\n  onChange,\n  minDate,\n  maxDate,\n  saveTime,\n  goToToday,\n  clear,\n}: TimePickerProps) => {\n  const disabled = !value;\n\n  const hoursInputRef = useRef<HTMLInputElement>(null);\n  const minutesInputRef = useRef<HTMLInputElement>(null);\n  const secondsInputRef = useRef<HTMLInputElement>(null);\n\n  const focusedInputRef = useRef<HTMLInputElement>();\n\n  const timeParts = useMemo(() => {\n    const partOfDay = value ? getPartOfDay(value) : undefined;\n\n    const hourOffset = partOfDay === 'pm' ? 12 : 0;\n\n    const hours = value ? value.getHours() - hourOffset : undefined;\n\n    const hoursAmPm = hours !== undefined && hours === 12 ? 0 : hours;\n\n    return {\n      hours: formatTimePart(hoursAmPm),\n      minutes: formatTimePart(value?.getMinutes()),\n      seconds: formatTimePart(value?.getSeconds()),\n      partOfDay,\n    };\n  }, [value]);\n\n  const [hours, setHours] = useState(timeParts.hours);\n  const [minutes, setMinutes] = useState(timeParts.minutes);\n  const [seconds, setSeconds] = useState(timeParts.seconds);\n\n  useEffect(() => {\n    if (focusedInputRef.current !== hoursInputRef.current) {\n      setHours(timeParts.hours);\n    }\n    if (focusedInputRef.current !== minutesInputRef.current) {\n      setMinutes(timeParts.minutes);\n    }\n    if (focusedInputRef.current !== secondsInputRef.current) {\n      setSeconds(timeParts.seconds);\n    }\n  }, [timeParts.hours, timeParts.minutes, timeParts.seconds]);\n\n  const constraintText = useMemo(() => {\n    const minValue = isSameDay(minDate, value) && moment(minDate).format('hh:mm:ss A');\n    const maxValue = isSameDay(maxDate, value) && moment(maxDate).format('hh:mm:ss A');\n\n    if (minValue && maxValue) {\n      return `In ${minValue} - ${maxValue} range`;\n    } else if (minValue) {\n      return `Can’t be earlier than ${minValue}`;\n    } else if (maxValue) {\n      return `Can’t be later than ${maxValue}`;\n    }\n    return undefined;\n  }, [maxDate, minDate, value]);\n\n  const amPmOptions = useMemo(\n    () =>\n      ToggleButtonsOptions.map(item => {\n        const isAmDisabled =\n          item.value === 'am' &&\n          !!minDate &&\n          isSameDay(value, minDate) &&\n          getOffsetFromDayStart(minDate) >= HalfOfDayMs;\n\n        const isPmDisabled =\n          item.value === 'pm' &&\n          !!maxDate &&\n          isSameDay(value, maxDate) &&\n          getOffsetFromDayStart(maxDate) < HalfOfDayMs;\n\n        return { ...item, disabled: disabled || isAmDisabled || isPmDisabled };\n      }),\n    [disabled, maxDate, minDate, value]\n  );\n\n  const updateValue = useCallback(\n    (type: 'hours' | 'minutes' | 'seconds' | 'partOfDay', newValue: string) => {\n      if (!value) {\n        return;\n      }\n\n      const newDate = new Date(value);\n\n      if (type === 'hours' && validateHours(newValue)) {\n        const partOfDayOffset = timeParts.partOfDay === 'pm' ? 12 : 0;\n        newDate.setHours(partOfDayOffset + Number(newValue));\n      } else if (type === 'minutes' && validateMinutes(newValue)) {\n        newDate.setMinutes(Number(newValue));\n      } else if (type === 'seconds' && validateSeconds(newValue)) {\n        newDate.setSeconds(Number(newValue));\n      } else if (type === 'partOfDay' && (newValue === 'am' || newValue === 'pm')) {\n        const hoursOffset = newDate.getHours() % 12;\n        newDate.setHours((newValue === 'pm' ? 12 : 0) + hoursOffset);\n      }\n\n      if (Math.floor(newDate.getTime() / 1000) !== Math.floor(value.getTime() / 1000)) {\n        onChange(newDate);\n      }\n    },\n    [timeParts.partOfDay, onChange, value]\n  );\n\n  const onFieldFocus = useCallback<FocusEventHandler<HTMLInputElement>>(e => {\n    e.target.select();\n    focusedInputRef.current = e.target;\n  }, []);\n\n  const onFieldBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n    e => {\n      const fieldValue = sanitize(e.target.value);\n\n      if (e.target === hoursInputRef.current) {\n        const actualHours = getActualHours(fieldValue);\n        const newHours = validateHours(actualHours) ? formatTimePart(actualHours) : timeParts.hours;\n        setHours(newHours);\n        updateValue('hours', newHours);\n      }\n      if (e.target === minutesInputRef.current) {\n        const newMinutes = validateMinutes(fieldValue)\n          ? formatTimePart(fieldValue)\n          : timeParts.minutes;\n        setMinutes(newMinutes);\n        updateValue('minutes', newMinutes);\n      }\n      if (e.target === secondsInputRef.current) {\n        const newSeconds = validateSeconds(fieldValue)\n          ? formatTimePart(fieldValue)\n          : timeParts.seconds;\n        setSeconds(newSeconds);\n        updateValue('seconds', newSeconds);\n      }\n\n      focusedInputRef.current = undefined;\n    },\n    [timeParts.hours, timeParts.minutes, timeParts.seconds, updateValue]\n  );\n\n  const onChangeHours = useCallback(\n    (newValue: string) => {\n      const sanitized = sanitize(newValue);\n      const actualHours = getActualHours(sanitized);\n      setHours(sanitized);\n      if (sanitized.length === 2 && validateHours(sanitized)) {\n        updateValue('hours', actualHours);\n        minutesInputRef.current?.focus();\n      }\n    },\n    [updateValue]\n  );\n\n  const onChangeMinutes = useCallback(\n    (newValue: string) => {\n      const sanitized = sanitize(newValue);\n      setMinutes(sanitized);\n      if (sanitized.length === 2 && validateMinutes(sanitized)) {\n        updateValue('minutes', sanitized);\n        secondsInputRef.current?.focus();\n      }\n    },\n    [updateValue]\n  );\n\n  const onChangeSeconds = useCallback(\n    (newValue: string) => {\n      const sanitized = sanitize(newValue);\n      setSeconds(sanitized);\n      if (validateSeconds(sanitized)) {\n        updateValue('seconds', sanitized);\n      }\n    },\n    [updateValue]\n  );\n\n  const setPartOfDay = useCallback(\n    (newValue: string) => {\n      updateValue('partOfDay', newValue);\n    },\n    [updateValue]\n  );\n\n  const outOfBounds =\n    Number(value?.getTime()) > Number(maxDate?.getTime()) ||\n    Number(value?.getTime()) < Number(minDate?.getTime());\n\n  const hoursInvalid = !validateHours(hours) || outOfBounds;\n  const minutesInvalid = !validateMinutes(minutes) || outOfBounds;\n  const secondsInvalid = !validateSeconds(seconds) || outOfBounds;\n\n  return (\n    <>\n      <div className={classNames(styles.timePicker)}>\n        <Text className={styles.header} size={14}>\n          <span className={classNames(styles.headerText, disabled && styles.disabled)}>Time</span>\n          {constraintText && (\n            <>\n              <InfoIcon className={styles.constraintIcon} size={16} />\n              {constraintText}\n            </>\n          )}\n        </Text>\n\n        <TextInputNext\n          placeholder=\"HH\"\n          className={styles.input}\n          disabled={disabled}\n          value={hours}\n          onChange={onChangeHours}\n          status={hoursInvalid ? 'error' : undefined}\n          inputRef={hoursInputRef}\n          onFocus={onFieldFocus}\n          onBlur={onFieldBlur}\n        />\n\n        <Text color=\"T9\" size={14}>\n          :\n        </Text>\n\n        <TextInputNext\n          placeholder=\"MM\"\n          className={styles.input}\n          disabled={disabled}\n          value={minutes}\n          onChange={onChangeMinutes}\n          status={minutesInvalid ? 'error' : undefined}\n          inputRef={minutesInputRef}\n          onFocus={onFieldFocus}\n          onBlur={onFieldBlur}\n        />\n\n        <Text color=\"T9\" size={14}>\n          :\n        </Text>\n\n        <TextInputNext\n          placeholder=\"SS\"\n          className={styles.input}\n          disabled={disabled}\n          value={seconds}\n          onChange={onChangeSeconds}\n          status={secondsInvalid ? 'error' : undefined}\n          inputRef={secondsInputRef}\n          onFocus={onFieldFocus}\n          onBlur={onFieldBlur}\n        />\n\n        <ToggleButtons\n          options={amPmOptions}\n          className={styles.tabs}\n          size=\"small\"\n          value={timeParts.partOfDay}\n          onChange={setPartOfDay}\n        />\n      </div>\n      <div className={styles.footer}>\n        {goToToday && (\n          <Button onClick={goToToday} type=\"tertiary\" size=\"small\">\n            Today\n          </Button>\n        )}\n\n        <div className={styles.actions}>\n          {clear && (\n            <Button onClick={clear} type=\"tertiary\" size=\"small\" disabled={!value}>\n              Clear\n            </Button>\n          )}\n\n          <Button\n            onClick={saveTime}\n            type=\"secondary\"\n            size=\"small\"\n            disabled={!value || hoursInvalid || minutesInvalid || secondsInvalid}\n          >\n            Save\n          </Button>\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["ToggleButtonsOptions","value","label","sanitize","replace","substring","validateHours","Number","validateMinutes","validateSeconds","getOffsetFromDayStart","date","getTime","moment","startOf","toDate","formatTimePart","part","undefined","padStart","String","getActualHours","sanitized","_ref","onChange","minDate","maxDate","saveTime","goToToday","clear","disabled","hoursInputRef","useRef","minutesInputRef","secondsInputRef","focusedInputRef","timeParts","useMemo","partOfDay","hourOffset","hours","getHours","minutes","getMinutes","seconds","getSeconds","_useState","useState","_useState2","_slicedToArray","setHours","_useState3","_useState4","setMinutes","_useState5","_useState6","setSeconds","useEffect","current","constraintText","minValue","isSameDay","format","maxValue","concat","amPmOptions","map","item","isAmDisabled","isPmDisabled","_objectSpread","updateValue","useCallback","type","newValue","newDate","Date","partOfDayOffset","hoursOffset","Math","floor","onFieldFocus","e","target","select","onFieldBlur","fieldValue","actualHours","newHours","newMinutes","newSeconds","onChangeHours","_minutesInputRef$curr","length","focus","onChangeMinutes","_secondsInputRef$curr","onChangeSeconds","setPartOfDay","outOfBounds","hoursInvalid","minutesInvalid","secondsInvalid","_jsxs","_Fragment","children","jsxs","className","classNames","styles","timePicker","Text","header","size","_jsx","jsx","headerText","InfoIcon","constraintIcon","TextInputNext","placeholder","input","status","inputRef","onFocus","onBlur","color","ToggleButtons","options","tabs","footer","Button","onClick","actions"],"mappings":"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"}
+{"version":3,"file":"TimePicker.js","sources":["../../../../../src/componentsV2/DatePicker/TimePicker/TimePicker.tsx"],"sourcesContent":["import { FocusEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport moment from 'moment-timezone';\nimport { padStart } from 'lodash';\n\nimport { TextInputNext } from '../../TextInputNext';\nimport { Text } from '../../Text';\nimport { isSameDay } from '../utils';\nimport { Button } from '../../Button';\n\nimport styles from './TimePicker.scss';\n\nimport { InfoIcon } from '~/icons';\n\nexport type TimePickerProps = {\n  value?: Date;\n  onChange: (date: Date) => void;\n  saveTime: () => void;\n  maxDate?: Date;\n  minDate?: Date;\n\n  goToToday?: () => void;\n  clear?: () => void;\n};\n\nconst sanitize = (value: string) => value.replace(/[^\\d]/g, '').substring(0, 2);\nconst validateHours = (value?: string) => Number(value) >= 0 && Number(value) <= 23;\nconst validateMinutes = (value?: string) => Number(value) >= 0 && Number(value) < 60;\nconst validateSeconds = validateMinutes;\n\nconst formatTimePart = (part?: string | number) =>\n  part !== undefined ? padStart(String(part), 2, '0') : '';\n\nconst elementsClassNames = { input: styles.inputElement };\n\nexport const TimePicker = ({\n  value,\n  onChange,\n  minDate,\n  maxDate,\n  saveTime,\n  goToToday,\n  clear,\n}: TimePickerProps) => {\n  const disabled = !value;\n\n  const hoursInputRef = useRef<HTMLInputElement>(null);\n  const minutesInputRef = useRef<HTMLInputElement>(null);\n  const secondsInputRef = useRef<HTMLInputElement>(null);\n\n  const focusedInputRef = useRef<HTMLInputElement>();\n\n  const timeParts = useMemo(() => {\n    return {\n      hours: formatTimePart(value?.getHours()),\n      minutes: formatTimePart(value?.getMinutes()),\n      seconds: formatTimePart(value?.getSeconds()),\n    };\n  }, [value]);\n\n  const [hours, setHours] = useState(timeParts.hours);\n  const [minutes, setMinutes] = useState(timeParts.minutes);\n  const [seconds, setSeconds] = useState(timeParts.seconds);\n\n  useEffect(() => {\n    if (focusedInputRef.current !== hoursInputRef.current) {\n      setHours(timeParts.hours);\n    }\n    if (focusedInputRef.current !== minutesInputRef.current) {\n      setMinutes(timeParts.minutes);\n    }\n    if (focusedInputRef.current !== secondsInputRef.current) {\n      setSeconds(timeParts.seconds);\n    }\n  }, [timeParts.hours, timeParts.minutes, timeParts.seconds]);\n\n  const constraintText = useMemo(() => {\n    const minValue = isSameDay(minDate, value) && moment(minDate).format('HH:mm:ss');\n    const maxValue = isSameDay(maxDate, value) && moment(maxDate).format('HH:mm:ss');\n\n    if (minValue && maxValue) {\n      return `In ${minValue} - ${maxValue} range`;\n    } else if (minValue) {\n      return `Can’t be earlier than ${minValue}`;\n    } else if (maxValue) {\n      return `Can’t be later than ${maxValue}`;\n    }\n    return undefined;\n  }, [maxDate, minDate, value]);\n\n  const updateValue = useCallback(\n    (type: 'hours' | 'minutes' | 'seconds', newValue: string) => {\n      if (!value) {\n        return;\n      }\n\n      const newDate = new Date(value);\n\n      if (type === 'hours' && validateHours(newValue)) {\n        newDate.setHours(Number(newValue));\n      } else if (type === 'minutes' && validateMinutes(newValue)) {\n        newDate.setMinutes(Number(newValue));\n      } else if (type === 'seconds' && validateSeconds(newValue)) {\n        newDate.setSeconds(Number(newValue));\n      }\n\n      if (Math.floor(newDate.getTime() / 1000) !== Math.floor(value.getTime() / 1000)) {\n        onChange(newDate);\n      }\n    },\n    [onChange, value]\n  );\n\n  const onFieldFocus = useCallback<FocusEventHandler<HTMLInputElement>>(e => {\n    e.target.select();\n    focusedInputRef.current = e.target;\n  }, []);\n\n  const onFieldBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n    e => {\n      const fieldValue = sanitize(e.target.value);\n\n      if (e.target === hoursInputRef.current) {\n        const newHours = validateHours(fieldValue) ? formatTimePart(fieldValue) : timeParts.hours;\n        setHours(newHours);\n        updateValue('hours', newHours);\n      }\n      if (e.target === minutesInputRef.current) {\n        const newMinutes = validateMinutes(fieldValue)\n          ? formatTimePart(fieldValue)\n          : timeParts.minutes;\n        setMinutes(newMinutes);\n        updateValue('minutes', newMinutes);\n      }\n      if (e.target === secondsInputRef.current) {\n        const newSeconds = validateSeconds(fieldValue)\n          ? formatTimePart(fieldValue)\n          : timeParts.seconds;\n        setSeconds(newSeconds);\n        updateValue('seconds', newSeconds);\n      }\n\n      focusedInputRef.current = undefined;\n    },\n    [timeParts.hours, timeParts.minutes, timeParts.seconds, updateValue]\n  );\n\n  const onChangeHours = useCallback(\n    (newValue: string) => {\n      const sanitized = sanitize(newValue);\n      setHours(sanitized);\n      if (sanitized.length === 2 && validateHours(sanitized)) {\n        updateValue('hours', sanitized);\n        minutesInputRef.current?.focus();\n      }\n    },\n    [updateValue]\n  );\n\n  const onChangeMinutes = useCallback(\n    (newValue: string) => {\n      const sanitized = sanitize(newValue);\n      setMinutes(sanitized);\n      if (sanitized.length === 2 && validateMinutes(sanitized)) {\n        updateValue('minutes', sanitized);\n        secondsInputRef.current?.focus();\n      }\n    },\n    [updateValue]\n  );\n\n  const onChangeSeconds = useCallback(\n    (newValue: string) => {\n      const sanitized = sanitize(newValue);\n      setSeconds(sanitized);\n      if (validateSeconds(sanitized)) {\n        updateValue('seconds', sanitized);\n      }\n    },\n    [updateValue]\n  );\n\n  const outOfBounds =\n    Number(value?.getTime()) > Number(maxDate?.getTime()) ||\n    Number(value?.getTime()) < Number(minDate?.getTime());\n\n  const hoursInvalid = !validateHours(hours) || outOfBounds;\n  const minutesInvalid = !validateMinutes(minutes) || outOfBounds;\n  const secondsInvalid = !validateSeconds(seconds) || outOfBounds;\n\n  return (\n    <>\n      <div className={classNames(styles.timePicker)}>\n        <Text color={disabled ? 'T9' : 'T1'} size={14} className={styles.header}>\n          Time\n        </Text>\n\n        <TextInputNext\n          placeholder=\"HH\"\n          className={styles.input}\n          disabled={disabled}\n          value={hours}\n          onChange={onChangeHours}\n          status={hoursInvalid ? 'error' : undefined}\n          inputRef={hoursInputRef}\n          onFocus={onFieldFocus}\n          onBlur={onFieldBlur}\n          elementsClassNames={elementsClassNames}\n        />\n\n        <Text color=\"T9\" size={14}>\n          :\n        </Text>\n\n        <TextInputNext\n          placeholder=\"MM\"\n          className={styles.input}\n          disabled={disabled}\n          value={minutes}\n          onChange={onChangeMinutes}\n          status={minutesInvalid ? 'error' : undefined}\n          inputRef={minutesInputRef}\n          onFocus={onFieldFocus}\n          onBlur={onFieldBlur}\n          elementsClassNames={elementsClassNames}\n        />\n\n        <Text color=\"T9\" size={14}>\n          :\n        </Text>\n\n        <TextInputNext\n          placeholder=\"SS\"\n          className={styles.input}\n          disabled={disabled}\n          value={seconds}\n          onChange={onChangeSeconds}\n          status={secondsInvalid ? 'error' : undefined}\n          inputRef={secondsInputRef}\n          onFocus={onFieldFocus}\n          onBlur={onFieldBlur}\n          elementsClassNames={elementsClassNames}\n        />\n\n        {constraintText && (\n          <Text className={styles.constraintText} size={12}>\n            <InfoIcon className={styles.constraintIcon} size={16} />\n            {constraintText}\n          </Text>\n        )}\n      </div>\n      <div className={styles.footer}>\n        {goToToday && (\n          <Button onClick={goToToday} type=\"tertiary\" size=\"small\">\n            Today\n          </Button>\n        )}\n\n        <div className={styles.actions}>\n          {clear && (\n            <Button onClick={clear} type=\"tertiary\" size=\"small\" disabled={!value}>\n              Clear\n            </Button>\n          )}\n\n          <Button\n            onClick={saveTime}\n            type=\"secondary\"\n            size=\"small\"\n            disabled={!value || hoursInvalid || minutesInvalid || secondsInvalid}\n          >\n            Save\n          </Button>\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["sanitize","value","replace","substring","validateHours","Number","validateMinutes","validateSeconds","formatTimePart","part","undefined","padStart","String","elementsClassNames","input","styles","inputElement","_ref","onChange","minDate","maxDate","saveTime","goToToday","clear","disabled","hoursInputRef","useRef","minutesInputRef","secondsInputRef","focusedInputRef","timeParts","useMemo","hours","getHours","minutes","getMinutes","seconds","getSeconds","_useState","useState","_useState2","_slicedToArray","setHours","_useState3","_useState4","setMinutes","_useState5","_useState6","setSeconds","useEffect","current","constraintText","minValue","isSameDay","moment","format","maxValue","concat","updateValue","useCallback","type","newValue","newDate","Date","Math","floor","getTime","onFieldFocus","e","target","select","onFieldBlur","fieldValue","newHours","newMinutes","newSeconds","onChangeHours","_minutesInputRef$curr","sanitized","length","focus","onChangeMinutes","_secondsInputRef$curr","onChangeSeconds","outOfBounds","hoursInvalid","minutesInvalid","secondsInvalid","_jsxs","_Fragment","children","jsxs","className","classNames","timePicker","_jsx","Text","color","size","header","TextInputNext","placeholder","status","inputRef","onFocus","onBlur","InfoIcon","constraintIcon","footer","jsx","Button","onClick","actions"],"mappings":"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"}

package/cjs-bundle/componentsV2/DatePicker/TimePicker/TimePicker.scss.js

@@ -1,2 +1,2 @@
-"use strict";require('./../../../ext-esm/style-inject/dist/style-inject.es.js')(".TimePicker_timePicker__zbwy1{align-items:center;border-top:2px solid var(--palette-background-b-4);display:flex;flex-flow:row wrap;gap:8px 4px;padding:8px}.TimePicker_header__IQJE8{align-items:center;color:var(--palette-info-light);display:flex;flex:0 0 100%;flex-flow:row nowrap;gap:4px}.TimePicker_headerText__ztp7U{color:var(--palette-primary-text-1);flex:0 0 auto}.TimePicker_headerText__ztp7U.TimePicker_disabled__tK9tS{color:var(--palette-primary-text-9);cursor:default}.TimePicker_constraintIcon__y2pg6{flex:0 0 auto;margin-left:auto}.TimePicker_input__-wBnb{width:46px}.TimePicker_tabs__jNS1I{margin-left:auto}.TimePicker_footer__-xJOC{align-items:center;border-top:2px solid var(--palette-background-b-4);display:flex;flex-flow:row nowrap;gap:8px;padding:8px}.TimePicker_actions__fx-7e{margin-left:auto}"),module.exports={spacing:"8",timePicker:"TimePicker_timePicker__zbwy1",header:"TimePicker_header__IQJE8",headerText:"TimePicker_headerText__ztp7U",disabled:"TimePicker_disabled__tK9tS",constraintIcon:"TimePicker_constraintIcon__y2pg6",input:"TimePicker_input__-wBnb",tabs:"TimePicker_tabs__jNS1I",footer:"TimePicker_footer__-xJOC",actions:"TimePicker_actions__fx-7e"};
+"use strict";require('./../../../ext-esm/style-inject/dist/style-inject.es.js')(".TimePicker_timePicker__zbwy1{align-items:center;border-top:2px solid var(--palette-background-b-4);display:flex;flex-flow:row wrap;gap:8px 4px;padding:8px}.TimePicker_header__IQJE8{margin-right:auto}.TimePicker_constraintText__x7oac{align-items:center;color:var(--palette-info-light);display:flex;flex-flow:row nowrap;gap:4px}.TimePicker_constraintIcon__y2pg6{flex:0 0 auto}.TimePicker_input__-wBnb{width:46px}.TimePicker_inputElement__WShYF{text-align:center}.TimePicker_tabs__jNS1I{margin-left:auto}.TimePicker_footer__-xJOC{align-items:center;border-top:2px solid var(--palette-background-b-4);display:flex;flex-flow:row nowrap;gap:8px;padding:8px}.TimePicker_actions__fx-7e{margin-left:auto}"),module.exports={spacing:"8",timePicker:"TimePicker_timePicker__zbwy1",header:"TimePicker_header__IQJE8",constraintText:"TimePicker_constraintText__x7oac",constraintIcon:"TimePicker_constraintIcon__y2pg6",input:"TimePicker_input__-wBnb",inputElement:"TimePicker_inputElement__WShYF",tabs:"TimePicker_tabs__jNS1I",footer:"TimePicker_footer__-xJOC",actions:"TimePicker_actions__fx-7e"};
 //# sourceMappingURL=TimePicker.scss.js.map