@cube-dev/ui-kit 0.183.0 → 0.184.0

package/dist/components/fields/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":["BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","useEffect","useRef","useState","useEvent","FieldBaseProps","extractStyles","ItemButton","CubeItemProps","Text","getValidationIcon","getValidationTheme","useFieldProps","wrapWithField","Dialog","DialogTrigger","ColorSpace","ColorFormat","ColorValue","formatColor","parseColor","ColorPanel","ColorPopoverContext","ColorInput","ColorSwatch","ColorSwatchGroup","CubeColorSwatchItem","POPOVER_STYLES","overflow","PALETTE_STYLES","border","padding","width","FALLBACK_COLOR","h","s","l","ColorPickerWrapper","qa","styles","display","flow","gridRows","placeContent","placeItems","CubeColorPickerProps","value","defaultValue","onChange","format","defaultSpace","isOpen","defaultOpen","onOpenChange","shouldFlip","children","placeholder","size","type","theme","triggerTooltip","swatches","swatchColumns","triggerStyles","swatchStyles","ColorPicker","allProps","ref","HTMLElement","props","defaultValidationTrigger","valuePropsMapper","id","controlledOpen","isDisabled","isReadOnly","isLoading","isInvalid","isValid","autoFocus","ariaLabel","isEditingDisabled","color","setColor","toString","space","setSpace","setOpen","emitted","undefined","current","handleColorChange","next","text","colorText","handleValueChange","handleOpenChange","label","pickerField","length","cubeInputType"],"sources":["../../../../src/components/fields/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { FieldBaseProps } from '../../../shared';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationIcon,\n  getValidationTheme,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { ColorSwatchGroup, CubeColorSwatchItem } from '../ColorSwatchGroup';\n\n/**\n * A popover caps its height at half the viewport. The panel can exceed that on\n * a short screen, and would otherwise spill outside the popover's own border.\n */\nconst POPOVER_STYLES: Styles = { overflow: 'auto' };\n\n/**\n * The rule separating the palette from the editor. `Divider` is not used: it\n * places itself on named grid lines meant for menu layouts, which this panel\n * does not define, so it lands in the wrong row and spawns a stray column.\n */\nconst PALETTE_STYLES: Styles = {\n  border: 'top',\n  padding: '1x top',\n  width: '100%',\n};\n\n/** What the popover starts from when there is no color to edit yet. */\nconst FALLBACK_COLOR: ColorValue = { h: 264, s: 0.8, l: 0.6 };\n\nconst ColorPickerWrapper = tasty({\n  qa: 'ColorPickerWrapper',\n  styles: {\n    display: 'inline-grid',\n    flow: 'column',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n  },\n});\n\nexport interface CubeColorPickerProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps<string | null | undefined> {\n  /** The selected color, as a color string. */\n  value?: string | null;\n  /** The initial color of an uncontrolled picker. */\n  defaultValue?: string | null;\n  /** Called with the color string, or `null` when there is no color. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\n  /** Color concept the popover opens with. */\n  defaultSpace?: ColorSpace;\n  /** Whether the popover is open. Makes the disclosure controlled. */\n  isOpen?: boolean;\n  /** Whether the popover is open initially. */\n  defaultOpen?: boolean;\n  /** Called when the popover opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Whether the popover may flip to the other side of the trigger. */\n  shouldFlip?: boolean;\n  /** Replaces the color shown on the trigger. Pass `null` for a swatch on its own. */\n  children?: ReactNode;\n  /** Shown on the trigger while there is no color. */\n  placeholder?: ReactNode;\n  /** The size of the trigger. */\n  size?: CubeItemProps['size'];\n  /** The visual type of the trigger. */\n  type?: CubeItemProps['type'];\n  theme?: CubeItemProps['theme'];\n  /** Tooltip for the trigger, separate from the field tooltip. */\n  triggerTooltip?: CubeItemProps['tooltip'];\n  /** Colors to offer under the editor, for picking without dialing one in. */\n  swatches?: CubeColorSwatchItem[];\n  /** How many swatches per row. Defaults to a single row. */\n  swatchColumns?: number;\n  styles?: Styles;\n  /** Styles of the trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n}\n\n/**\n * A color swatch that opens the color popover — the same one `ColorInput`\n * uses, without the text field. Reach for it when a color is chosen but never\n * typed: a toolbar, a chart legend, a cell in a dense table.\n */\nexport const ColorPicker = forwardRef(function ColorPicker(\n  allProps: CubeColorPickerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    id,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    children,\n    placeholder = 'Pick a color',\n    size,\n    type = 'outline',\n    theme = 'default',\n    triggerTooltip,\n    swatches,\n    swatchColumns,\n    triggerStyles,\n    swatchStyles,\n    isDisabled,\n    isReadOnly,\n    isLoading,\n    isInvalid,\n    isValid,\n    autoFocus,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n\n  /**\n   * Loading locks the trigger, but the popover can outlive that — it may be\n   * controlled, or opened before the load began — so the editor inside has to\n   * refuse edits on the same terms.\n   */\n  const isEditingDisabled = isDisabled || isLoading;\n\n  const [color, setColor] = useState(() =>\n    parseColor((value ?? defaultValue ?? '').toString()),\n  );\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  /** What was last published, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\n\n  // Adopt values that did not come from here — a form reset, or a parent that\n  // overrides what the user picked.\n  useEffect(() => {\n    if (value === undefined || value === emitted.current) return;\n\n    emitted.current = value;\n    setColor(parseColor((value ?? '').toString()));\n  }, [value]);\n\n  const handleColorChange = useEvent((next: ColorValue) => {\n    const text = formatColor(next, format);\n\n    emitted.current = text;\n    setColor(next);\n    onChange?.(text);\n  });\n\n  const colorText = color ? formatColor(color, format) : null;\n\n  /**\n   * The palette and the value field both speak in strings, and the field can\n   * hand back `null` when it is cleared — which has to reach the picker, or the\n   * text empties while the preview and trigger keep the old color.\n   */\n  const handleValueChange = useEvent((next: string | null) => {\n    emitted.current = next;\n    setColor(next ? parseColor(next) : null);\n    onChange?.(next);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  // The swatch carries the color and the label spells it out. `children`\n  // replaces that label, and `null` leaves the swatch on its own.\n  const label =\n    children !== undefined ? (\n      children\n    ) : color ? (\n      formatColor(color, format)\n    ) : (\n      // Muted, so an unset picker never reads like one holding a value —\n      // the same treatment `Picker` and `Select` give their placeholders.\n      <Text.Placeholder>{placeholder}</Text.Placeholder>\n    );\n\n  const pickerField = (\n    <ColorPickerWrapper styles={styles}>\n      <DialogTrigger\n        hideArrow\n        type=\"popover\"\n        mobileType=\"tray\"\n        placement=\"bottom start\"\n        isOpen={controlledOpen ?? isOpen}\n        shouldFlip={shouldFlip}\n        onOpenChange={handleOpenChange}\n      >\n        <ItemButton\n          data-popover-trigger\n          id={id}\n          qa={qa || 'ColorPickerTrigger'}\n          data-input-type=\"colorpicker\"\n          type={type}\n          theme={getValidationTheme(theme, { isInvalid, isValid })}\n          size={size}\n          // Fixed 20px rather than tracking the trigger, same as `ColorInput`\n          // and same as this has always rendered.\n          icon={\n            <ColorSwatch size=\"small\" color={color} styles={swatchStyles} />\n          }\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={triggerTooltip}\n          isDisabled={isEditingDisabled || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label=\"Color picker\"\n          width=\"max-content\"\n          styles={POPOVER_STYLES}\n        >\n          {/* Marks the subtree so a nested swatch group drops its custom-color\n              escape hatch, which is a picker and would recurse forever. */}\n          <ColorPopoverContext.Provider value={true}>\n            <ColorPanel\n              color={color ?? FALLBACK_COLOR}\n              space={space}\n              isDisabled={isEditingDisabled || isReadOnly}\n              previewFormat={format}\n              input={\n                <ColorInput\n                  aria-label=\"Color value\"\n                  format={format}\n                  value={colorText}\n                  isDisabled={isEditingDisabled}\n                  isReadOnly={isReadOnly}\n                  onChange={handleValueChange}\n                />\n              }\n              swatches={\n                swatches?.length ? (\n                  <ColorSwatchGroup\n                    aria-label=\"Palette\"\n                    styles={PALETTE_STYLES}\n                    colors={swatches}\n                    columns={swatchColumns}\n                    format={format}\n                    value={colorText}\n                    isDisabled={isEditingDisabled || isReadOnly}\n                    onChange={handleValueChange}\n                  />\n                ) : null\n              }\n              onChange={handleColorChange}\n              onSpaceChange={setSpace}\n            />\n          </ColorPopoverContext.Provider>\n        </Dialog>\n      </DialogTrigger>\n    </ColorPickerWrapper>\n  );\n\n  return wrapWithField(pickerField, ref as any, props);\n});\n\n/**\n * Drives the legacy `<Field>` wiring: `Picker` validates on change and passes\n * the value through untouched, where `Text` would default to `onBlur` and\n * coerce `null` into an empty string.\n */\n(ColorPicker as any).cubeInputType = 'Picker';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,MAAMoC,iBAAyB,EAAEC,UAAU,QAAQ;;;;;;AAOnD,MAAMC,iBAAyB;CAC7BC,QAAQ;CACRC,SAAS;CACTC,OAAO;CACR;;AAGD,MAAMC,iBAA6B;CAAEC,GAAG;CAAKC,GAAG;CAAKC,GAAG;CAAK;AAE7D,MAAMC,qBAAqBxC,MAAM;CAC/ByC,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,UAAU;EACVC,cAAc;EACdC,YAAY;EACd;CACD,CAAC;;;;;;AAqDF,MAAaqB,cAAclE,WAAW,SAASkE,YAC7CC,UACAC,KACA;CACA,MAAME,QAAQzD,cAAcsD,UAAU;EACpCI,0BAA0B;EAC1BC,mBAAmB,EAAEzB,OAAOE,gBAAgB;GACnCF;GACPE;GACD;EACF,CAAC;CAEF,MAAM,EACJV,IACAkC,IACA1B,OAAAA,SACAC,cACAC,UAAAA,YACAC,SAAS,OACTC,eAAe,OACfC,QAAQsB,gBACRrB,aACAC,cACAC,YACAC,UACAC,cAAc,gBACdC,MACAC,OAAO,WACPC,QAAQ,WACRC,gBACAC,UACAC,eACAC,eACAC,cACAU,YACAC,YACAC,WACAC,WACAC,SACAC,WACA,cAAcC,cACZX;CAEJ,MAAM9B,SAASjC,cAAc+D,OAAO,CAAC,GAAG3E,cAAc,GAAGF,aAAa,CAAC;;;;;;CAOvE,MAAMyF,oBAAoBP,cAAcE;CAExC,MAAM,CAACM,OAAOC,YAAYhF,eACxBiB,YAAY0B,WAASC,gBAAgB,IAAIqC,UAAU,CACrD,CAAC;CACD,MAAM,CAACC,OAAOC,YAAYnF,SAAqB+C,aAAa;CAC5D,MAAM,CAACC,QAAQoC,WAAWpF,SAASiD,eAAe,MAAM;;CAGxD,MAAMoC,UAAUtF,OAAkC4C,QAAM;AAIxD7C,iBAAgB;AACd,MAAI6C,YAAU2C,UAAa3C,YAAU0C,QAAQE,QAAS;AAEtDF,UAAQE,UAAU5C;AAClBqC,WAAS/D,YAAY0B,WAAS,IAAIsC,UAAU,CAAC,CAAC;IAC7C,CAACtC,QAAM,CAAC;CAEX,MAAM6C,oBAAoBvF,UAAUwF,SAAqB;EACvD,MAAMC,OAAO1E,YAAYyE,MAAM3C,OAAO;AAEtCuC,UAAQE,UAAUG;AAClBV,WAASS,KAAK;AACd5C,eAAW6C,KAAK;GAChB;CAEF,MAAMC,YAAYZ,QAAQ/D,YAAY+D,OAAOjC,OAAO,GAAG;;;;;;CAOvD,MAAM8C,oBAAoB3F,UAAUwF,WAAwB;AAC1DJ,UAAQE,UAAUE;AAClBT,WAASS,SAAOxE,WAAWwE,OAAK,GAAG,KAAK;AACxC5C,eAAW4C,OAAK;GAChB;CAEF,MAAMI,mBAAmB5F,UAAUwF,WAAkB;AACnDL,UAAQK,OAAK;AACbvC,iBAAeuC,OAAK;GACpB;CAIF,MAAMK,QACJ1C,aAAakC,SACXlC,WACE2B,QACF/D,YAAY+D,OAAOjC,OAAO,GAI1B,oBAAC,MAAK,yBAAaO,cACpB;AAkFH,QAAO3C,cA/EL,oBAAC;EAA2B0B;YAC1B,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACV,QAAQkC,kBAAkBtB;GACdG;GACZ,cAAc0C;cAEd,oBAAC;IACC;IACIxB;IACJ,IAAIlC,MAAM;IACV,mBAAgB;IACVoB;IACN,OAAO/C,mBAAmBgD,OAAO;KAAEkB;KAAWC;KAAS,CAAC;IAClDrB;IAGN,MACE,oBAAC;KAAY,MAAK;KAAeyB;KAAO,QAAQlB;MAClD;IACA,WAAWtD,kBAAkB;KAAEmE;KAAWC;KAAS,CAAC;IACpD,SAASlB;IACT,YAAYqB,qBAAqBN;IACtBI;IACX,cAAYC;IACZ,MAAM,EAAExB,aAAa,CAAC0B,OAAO;IAC7B,QAAQnB;cAEPkC;KACS,EACZ,oBAAC;IACC,cAAW;IACX,OAAM;IACN,QAAQtE;cAIR,oBAAC,oBAAoB;KAAS,OAAO;eACnC,oBAAC;MACC,OAAOuD,SAASjD;MACToD;MACP,YAAYJ,qBAAqBN;MACjC,eAAe1B;MACf,OACE,oBAAC;OACC,cAAW;OACHA;OACR,OAAO6C;OACP,YAAYb;OACAN;OACZ,UAAUoB;QAEd;MACA,UACElC,UAAUsC,SACR,oBAAC;OACC,cAAW;OACX,QAAQtE;OACR,QAAQgC;OACR,SAASC;OACDb;OACR,OAAO6C;OACP,YAAYb,qBAAqBN;OACjC,UAAUoB;QACV,GACA;MAEN,UAAUJ;MACV,eAAeL;OAAS;MAEE;KACxB;IACK;GAElB,EAEiCnB,KAAYE,MAAM;EACpD;;;;;;AAOF,AAACJ,YAAoBmC,gBAAgB"}
+{"version":3,"file":"ColorPicker.js","names":["BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","RefObject","useEffect","useRef","useState","Placement","useEvent","FieldBaseProps","extractStyles","ItemButton","CubeItemProps","Text","getValidationIcon","getValidationTheme","useFieldProps","wrapWithField","Dialog","DialogTrigger","ColorSpace","ColorFormat","ColorValue","formatColor","parseColor","ColorPanel","ColorPopoverContext","ColorInput","ColorSwatch","ColorSwatchGroup","CubeColorSwatchItem","POPOVER_STYLES","overflow","PALETTE_STYLES","border","padding","width","FALLBACK_COLOR","h","s","l","ColorPickerWrapper","qa","styles","display","flow","gridRows","placeContent","placeItems","CubeColorPickerProps","value","defaultValue","onChange","format","defaultSpace","isOpen","defaultOpen","onOpenChange","shouldFlip","targetRef","HTMLElement","placement","children","placeholder","size","type","theme","triggerTooltip","swatches","swatchColumns","triggerStyles","swatchStyles","ColorPicker","allProps","ref","props","defaultValidationTrigger","valuePropsMapper","id","controlledOpen","isDisabled","isReadOnly","isLoading","isInvalid","isValid","autoFocus","ariaLabel","isEditingDisabled","color","setColor","toString","space","setSpace","setOpen","emitted","undefined","current","handleColorChange","next","text","colorText","handleValueChange","handleOpenChange","label","pickerField","length","cubeInputType"],"sources":["../../../../src/components/fields/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Placement } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { FieldBaseProps } from '../../../shared';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationIcon,\n  getValidationTheme,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { ColorSwatchGroup, CubeColorSwatchItem } from '../ColorSwatchGroup';\n\n/**\n * A popover caps its height at half the viewport. The panel can exceed that on\n * a short screen, and would otherwise spill outside the popover's own border.\n */\nconst POPOVER_STYLES: Styles = { overflow: 'auto' };\n\n/**\n * The rule separating the palette from the editor. `Divider` is not used: it\n * places itself on named grid lines meant for menu layouts, which this panel\n * does not define, so it lands in the wrong row and spawns a stray column.\n */\nconst PALETTE_STYLES: Styles = {\n  border: 'top',\n  padding: '1x top',\n  width: '100%',\n};\n\n/** What the popover starts from when there is no color to edit yet. */\nconst FALLBACK_COLOR: ColorValue = { h: 264, s: 0.8, l: 0.6 };\n\nconst ColorPickerWrapper = tasty({\n  qa: 'ColorPickerWrapper',\n  styles: {\n    display: 'inline-grid',\n    flow: 'column',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n  },\n});\n\nexport interface CubeColorPickerProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps<string | null | undefined> {\n  /** The selected color, as a color string. */\n  value?: string | null;\n  /** The initial color of an uncontrolled picker. */\n  defaultValue?: string | null;\n  /** Called with the color string, or `null` when there is no color. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\n  /** Color concept the popover opens with. */\n  defaultSpace?: ColorSpace;\n  /** Whether the popover is open. Makes the disclosure controlled. */\n  isOpen?: boolean;\n  /** Whether the popover is open initially. */\n  defaultOpen?: boolean;\n  /** Called when the popover opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Whether the popover may flip to the other side of the trigger. */\n  shouldFlip?: boolean;\n  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the trigger button.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom start'\n   */\n  placement?: Placement;\n  /** Replaces the color shown on the trigger. Pass `null` for a swatch on its own. */\n  children?: ReactNode;\n  /** Shown on the trigger while there is no color. */\n  placeholder?: ReactNode;\n  /** The size of the trigger. */\n  size?: CubeItemProps['size'];\n  /** The visual type of the trigger. */\n  type?: CubeItemProps['type'];\n  theme?: CubeItemProps['theme'];\n  /** Tooltip for the trigger, separate from `labelTooltip`. */\n  triggerTooltip?: CubeItemProps['tooltip'];\n  /** Colors to offer under the editor, for picking without dialing one in. */\n  swatches?: CubeColorSwatchItem[];\n  /** How many swatches per row. Defaults to a single row. */\n  swatchColumns?: number;\n  styles?: Styles;\n  /** Styles of the trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n}\n\n/**\n * A color swatch that opens the color popover — the same one `ColorInput`\n * uses, without the text field. Reach for it when a color is chosen but never\n * typed: a toolbar, a chart legend, a cell in a dense table.\n */\nexport const ColorPicker = forwardRef(function ColorPicker(\n  allProps: CubeColorPickerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    id,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    targetRef,\n    placement = 'bottom start',\n    children,\n    placeholder = 'Pick a color',\n    size,\n    type = 'outline',\n    theme = 'default',\n    triggerTooltip,\n    swatches,\n    swatchColumns,\n    triggerStyles,\n    swatchStyles,\n    isDisabled,\n    isReadOnly,\n    isLoading,\n    isInvalid,\n    isValid,\n    autoFocus,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n\n  /**\n   * Loading locks the trigger, but the popover can outlive that — it may be\n   * controlled, or opened before the load began — so the editor inside has to\n   * refuse edits on the same terms.\n   */\n  const isEditingDisabled = isDisabled || isLoading;\n\n  const [color, setColor] = useState(() =>\n    parseColor((value ?? defaultValue ?? '').toString()),\n  );\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  /** What was last published, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\n\n  // Adopt values that did not come from here — a form reset, or a parent that\n  // overrides what the user picked.\n  useEffect(() => {\n    if (value === undefined || value === emitted.current) return;\n\n    emitted.current = value;\n    setColor(parseColor((value ?? '').toString()));\n  }, [value]);\n\n  const handleColorChange = useEvent((next: ColorValue) => {\n    const text = formatColor(next, format);\n\n    emitted.current = text;\n    setColor(next);\n    onChange?.(text);\n  });\n\n  const colorText = color ? formatColor(color, format) : null;\n\n  /**\n   * The palette and the value field both speak in strings, and the field can\n   * hand back `null` when it is cleared — which has to reach the picker, or the\n   * text empties while the preview and trigger keep the old color.\n   */\n  const handleValueChange = useEvent((next: string | null) => {\n    emitted.current = next;\n    setColor(next ? parseColor(next) : null);\n    onChange?.(next);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  // The swatch carries the color and the label spells it out. `children`\n  // replaces that label, and `null` leaves the swatch on its own.\n  const label =\n    children !== undefined ? (\n      children\n    ) : color ? (\n      formatColor(color, format)\n    ) : (\n      // Muted, so an unset picker never reads like one holding a value —\n      // the same treatment `Picker` and `Select` give their placeholders.\n      <Text.Placeholder>{placeholder}</Text.Placeholder>\n    );\n\n  const pickerField = (\n    <ColorPickerWrapper styles={styles}>\n      <DialogTrigger\n        hideArrow\n        type=\"popover\"\n        mobileType=\"tray\"\n        placement={placement}\n        targetRef={targetRef}\n        isOpen={controlledOpen ?? isOpen}\n        shouldFlip={shouldFlip}\n        onOpenChange={handleOpenChange}\n      >\n        <ItemButton\n          data-popover-trigger\n          id={id}\n          qa={qa || 'ColorPickerTrigger'}\n          data-input-type=\"colorpicker\"\n          type={type}\n          theme={getValidationTheme(theme, { isInvalid, isValid })}\n          size={size}\n          // Fixed 20px rather than tracking the trigger, same as `ColorInput`\n          // and same as this has always rendered.\n          icon={\n            <ColorSwatch size=\"small\" color={color} styles={swatchStyles} />\n          }\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={triggerTooltip}\n          isDisabled={isEditingDisabled || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label=\"Color picker\"\n          width=\"max-content\"\n          styles={POPOVER_STYLES}\n        >\n          {/* Marks the subtree so a nested swatch group drops its custom-color\n              escape hatch, which is a picker and would recurse forever. */}\n          <ColorPopoverContext.Provider value={true}>\n            <ColorPanel\n              color={color ?? FALLBACK_COLOR}\n              space={space}\n              isDisabled={isEditingDisabled || isReadOnly}\n              previewFormat={format}\n              input={\n                <ColorInput\n                  aria-label=\"Color value\"\n                  format={format}\n                  value={colorText}\n                  isDisabled={isEditingDisabled}\n                  isReadOnly={isReadOnly}\n                  onChange={handleValueChange}\n                />\n              }\n              swatches={\n                swatches?.length ? (\n                  <ColorSwatchGroup\n                    aria-label=\"Palette\"\n                    styles={PALETTE_STYLES}\n                    colors={swatches}\n                    columns={swatchColumns}\n                    format={format}\n                    value={colorText}\n                    isDisabled={isEditingDisabled || isReadOnly}\n                    onChange={handleValueChange}\n                  />\n                ) : null\n              }\n              onChange={handleColorChange}\n              onSpaceChange={setSpace}\n            />\n          </ColorPopoverContext.Provider>\n        </Dialog>\n      </DialogTrigger>\n    </ColorPickerWrapper>\n  );\n\n  return wrapWithField(pickerField, ref as any, props);\n});\n\n/**\n * Drives the legacy `<Field>` wiring: `Picker` validates on change and passes\n * the value through untouched, where `Text` would default to `onBlur` and\n * coerce `null` into an empty string.\n */\n(ColorPicker as any).cubeInputType = 'Picker';\n"],"mappings":"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"}

package/dist/components/fields/ColorSwatch/ColorSwatch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { parseColor, toHex } from "../color/color.js";
 import { c } from "react-compiler-runtime";

package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/fields/ComboBox/ComboBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/CommandTextArea.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/caretPosition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 //#region src/components/fields/CommandTextArea/caretPosition.ts
 const MIRROR_STYLES = [
 	"boxSizing",

package/dist/components/fields/CommandTextArea/useCaretAnchor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { getCaretRect } from "./caretPosition.js";
 import { c } from "react-compiler-runtime";
 import { useEffect, useLayoutEffect, useRef } from "react";

package/dist/components/fields/DatePicker/DateInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/DateInputBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";

package/dist/components/fields/DatePicker/DatePicker.d.ts

@@ -4,7 +4,8 @@ import "../../../shared/index.js";
 import { DateFieldBase } from "./types.js";
 import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
-import { AriaDatePickerProps, DateValue } from "react-aria";
+import { RefObject } from "react";
+import { AriaDatePickerProps, DateValue, Placement } from "react-aria";
 import * as _react_types_shared0 from "@react-types/shared";
 
 //#region src/components/fields/DatePicker/DatePicker.d.ts
@@ -16,6 +17,21 @@ interface CubeDatePickerProps<T extends DateValue = DateValue> extends Omit<Aria
   size?: 'small' | 'medium' | 'large' | (string & {});
   maxVisibleMonths?: number;
   shouldFlip?: boolean;
+  /**
+   * The ref of the element the popover should visually attach itself to.
+   * Defaults to the field wrapper.
+   *
+   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click
+   * dismissal treats as the trigger.
+   */
+  targetRef?: RefObject<HTMLElement | null>;
+  /**
+   * Placement of the popover relative to the anchor.
+   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,
+   * `'top start'`, `'right top'`, `'left top'`).
+   * @default 'bottom right'
+   */
+  placement?: Placement;
   useLocale?: boolean;
 }
 declare const _DatePicker: react.ForwardRefExoticComponent<Omit<CubeDatePickerProps<DateValue>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;

package/dist/components/fields/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
@@ -22,7 +22,7 @@ import { useDatePickerState } from "react-stately";
 
 //#region src/components/fields/DatePicker/DatePicker.tsx
 function DatePicker(props, ref) {
-	const $ = c(61);
+	const $ = c(63);
 	const { t } = useI18n();
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -90,35 +90,37 @@ function DatePicker(props, ref) {
 	const timeGranularity = state.granularity === "hour" || state.granularity === "minute" || state.granularity === "second" ? state.granularity : null;
 	const showTimeField = !!timeGranularity;
 	const t5 = qa || "DatePicker";
-	const t6 = props.shouldFlip;
-	let t7;
+	const t6 = props.placement ?? "bottom right";
+	const t7 = props.targetRef ?? targetRef;
+	const t8 = props.shouldFlip;
+	let t9;
 	if ($[11] !== buttonProps || $[12] !== focusPropsButton) {
-		t7 = mergeProps$1(buttonProps, focusPropsButton);
+		t9 = mergeProps$1(buttonProps, focusPropsButton);
 		$[11] = buttonProps;
 		$[12] = focusPropsButton;
-		$[13] = t7;
-	} else t7 = $[13];
-	let t8;
-	if ($[14] !== isDisabled || $[15] !== size || $[16] !== t7) {
-		t8 = /* @__PURE__ */ jsx(DatePickerButton, {
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] !== isDisabled || $[15] !== size || $[16] !== t9) {
+		t10 = /* @__PURE__ */ jsx(DatePickerButton, {
 			size,
-			...t7,
+			...t9,
 			isDisabled
 		});
 		$[14] = isDisabled;
 		$[15] = size;
-		$[16] = t7;
-		$[17] = t8;
-	} else t8 = $[17];
-	let t9;
+		$[16] = t9;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
 	if ($[18] !== calendarProps) {
-		t9 = /* @__PURE__ */ jsx(_Calendar, { ...calendarProps });
+		t11 = /* @__PURE__ */ jsx(_Calendar, { ...calendarProps });
 		$[18] = calendarProps;
-		$[19] = t9;
-	} else t9 = $[19];
-	let t10;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
 	if ($[20] !== props.hideTimeZone || $[21] !== props.hourCycle || $[22] !== showTimeField || $[23] !== state.setTimeValue || $[24] !== state.timeValue || $[25] !== t || $[26] !== timeGranularity || $[27] !== timeMaxValue || $[28] !== timeMinValue || $[29] !== timePlaceholder) {
-		t10 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
+		t12 = showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
 			padding: "1x",
 			label: t("datePicker.time", "Time"),
 			value: state.timeValue,
@@ -140,53 +142,55 @@ function DatePicker(props, ref) {
 		$[27] = timeMaxValue;
 		$[28] = timeMinValue;
 		$[29] = timePlaceholder;
-		$[30] = t10;
-	} else t10 = $[30];
-	let t11;
-	if ($[31] !== dialogProps || $[32] !== t10 || $[33] !== t9) {
-		t11 = /* @__PURE__ */ jsxs(Dialog, {
+		$[30] = t12;
+	} else t12 = $[30];
+	let t13;
+	if ($[31] !== dialogProps || $[32] !== t11 || $[33] !== t12) {
+		t13 = /* @__PURE__ */ jsxs(Dialog, {
 			...dialogProps,
 			width: "max-content",
-			children: [t9, t10]
+			children: [t11, t12]
 		});
 		$[31] = dialogProps;
-		$[32] = t10;
-		$[33] = t9;
-		$[34] = t11;
-	} else t11 = $[34];
-	let t12;
-	if ($[35] !== isOpen || $[36] !== props.shouldFlip || $[37] !== setOpen || $[38] !== t11 || $[39] !== t8) {
-		t12 = /* @__PURE__ */ jsxs(DialogTrigger, {
+		$[32] = t11;
+		$[33] = t12;
+		$[34] = t13;
+	} else t13 = $[34];
+	let t14;
+	if ($[35] !== isOpen || $[36] !== props.shouldFlip || $[37] !== setOpen || $[38] !== t10 || $[39] !== t13 || $[40] !== t6 || $[41] !== t7) {
+		t14 = /* @__PURE__ */ jsxs(DialogTrigger, {
 			hideArrow: true,
 			type: "popover",
 			mobileType: "tray",
-			placement: "bottom right",
-			targetRef,
+			placement: t6,
+			targetRef: t7,
 			isOpen,
-			shouldFlip: t6,
+			shouldFlip: t8,
 			onOpenChange: setOpen,
-			children: [t8, t11]
+			children: [t10, t13]
 		});
 		$[35] = isOpen;
 		$[36] = props.shouldFlip;
 		$[37] = setOpen;
-		$[38] = t11;
-		$[39] = t8;
-		$[40] = t12;
-	} else t12 = $[40];
-	let t13;
-	if ($[41] !== fieldProps || $[42] !== useLocaleProp) {
-		t13 = /* @__PURE__ */ jsx(DatePickerInput, {
+		$[38] = t10;
+		$[39] = t13;
+		$[40] = t6;
+		$[41] = t7;
+		$[42] = t14;
+	} else t14 = $[42];
+	let t15;
+	if ($[43] !== fieldProps || $[44] !== useLocaleProp) {
+		t15 = /* @__PURE__ */ jsx(DatePickerInput, {
 			useLocale: useLocaleProp,
 			...fieldProps
 		});
-		$[41] = fieldProps;
-		$[42] = useLocaleProp;
-		$[43] = t13;
-	} else t13 = $[43];
-	let t14;
-	if ($[44] !== focusProps || $[45] !== groupProps || $[46] !== isDisabled || $[47] !== isFocusedButton || $[48] !== isInvalid || $[49] !== isValid || $[50] !== size || $[51] !== styles || $[52] !== t12 || $[53] !== t13 || $[54] !== t5) {
-		t14 = /* @__PURE__ */ jsx(_DateInputBase, {
+		$[43] = fieldProps;
+		$[44] = useLocaleProp;
+		$[45] = t15;
+	} else t15 = $[45];
+	let t16;
+	if ($[46] !== focusProps || $[47] !== groupProps || $[48] !== isDisabled || $[49] !== isFocusedButton || $[50] !== isInvalid || $[51] !== isValid || $[52] !== size || $[53] !== styles || $[54] !== t14 || $[55] !== t15 || $[56] !== t5) {
+		t16 = /* @__PURE__ */ jsx(_DateInputBase, {
 			ref: targetRef,
 			qa: t5,
 			inputType: "datepicker",
@@ -198,36 +202,36 @@ function DatePicker(props, ref) {
 			size,
 			fieldProps: groupProps,
 			...focusProps,
-			suffix: t12,
-			children: t13
+			suffix: t14,
+			children: t15
 		});
-		$[44] = focusProps;
-		$[45] = groupProps;
-		$[46] = isDisabled;
-		$[47] = isFocusedButton;
-		$[48] = isInvalid;
-		$[49] = isValid;
-		$[50] = size;
-		$[51] = styles;
-		$[52] = t12;
-		$[53] = t13;
-		$[54] = t5;
-		$[55] = t14;
-	} else t14 = $[55];
-	const component = t14;
-	let t15;
-	if ($[56] !== component || $[57] !== domRef || $[58] !== labelProps || $[59] !== props) {
-		t15 = wrapWithField(component, domRef, {
+		$[46] = focusProps;
+		$[47] = groupProps;
+		$[48] = isDisabled;
+		$[49] = isFocusedButton;
+		$[50] = isInvalid;
+		$[51] = isValid;
+		$[52] = size;
+		$[53] = styles;
+		$[54] = t14;
+		$[55] = t15;
+		$[56] = t5;
+		$[57] = t16;
+	} else t16 = $[57];
+	const component = t16;
+	let t17;
+	if ($[58] !== component || $[59] !== domRef || $[60] !== labelProps || $[61] !== props) {
+		t17 = wrapWithField(component, domRef, {
 			...props,
 			labelProps: mergeProps$1(props.labelProps, labelProps)
 		});
-		$[56] = component;
-		$[57] = domRef;
-		$[58] = labelProps;
-		$[59] = props;
-		$[60] = t15;
-	} else t15 = $[60];
-	return t15;
+		$[58] = component;
+		$[59] = domRef;
+		$[60] = labelProps;
+		$[61] = props;
+		$[62] = t17;
+	} else t17 = $[62];
+	return t17;
 }
 const _DatePicker = forwardRef(DatePicker);
 _DatePicker.displayName = "DatePicker";

package/dist/components/fields/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["FocusableRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","forwardRef","useRef","AriaDatePickerProps","DateValue","useDatePicker","useFocusRing","useDatePickerState","useI18n","FieldBaseProps","mergeProps","extractStyles","useFieldProps","wrapWithField","Calendar","Dialog","DialogTrigger","DateInputBase","DatePickerButton","DatePickerInput","DEFAULT_DATE_PROPS","TimeInput","DateFieldBase","useFocusManagerRef","CubeDatePickerProps","Omit","T","wrapperStyles","inputStyles","triggerStyles","styles","size","maxVisibleMonths","shouldFlip","useLocale","DatePicker","props","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","t1","Object","assign","t2","qa","placeholderValue","isDisabled","isInvalid","isValid","useLocaleProp","autoFocus","targetRef","state","shouldCloseOnSelect","hasTime","isOpen","setOpen","domRef","t3","within","isTextInput","focusProps","t4","isFocused","isFocusedButton","focusPropsButton","groupProps","labelProps","fieldProps","buttonProps","dialogProps","calendarProps","placeholder","timePlaceholder","undefined","timeMinValue","minValue","timeMaxValue","maxValue","timeGranularity","granularity","showTimeField","t5","t6","t7","t8","t9","t10","hideTimeZone","hourCycle","setTimeValue","timeValue","t11","t12","t13","t14","component","t15","_DatePicker","displayName"],"sources":["../../../../src/components/fields/DatePicker/DatePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  useDatePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerInput } from './DatePickerInput';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeDatePickerProps<T extends DateValue = DateValue>\n  extends Omit<AriaDatePickerProps<T>, 'errorMessage' | 'form' | 'name'>,\n    DateFieldBase<T>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps<T | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  triggerStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  useLocale?: boolean;\n}\n\nfunction DatePicker<T extends DateValue>(\n  props: CubeDatePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  // The public type declares `ContainerStyleProps` and `styles`, so both have to\n  // reach the root — before this they were extracted and dropped, which made\n  // `width=\"100%\"` type-check and do nothing. `extractStyles` already folds in\n  // `props.styles` and lets the individual style props override it, which is the\n  // precedence every other component uses; re-spreading `props.styles` here\n  // would invert it. `wrapperStyles` stays the most specific and keeps winning.\n  let styles: Styles = {\n    ...extractStyles(props, CONTAINER_STYLES),\n    ...props.wrapperStyles,\n  };\n\n  let {\n    qa,\n    size,\n    placeholderValue,\n    isDisabled,\n    isInvalid,\n    isValid,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let domRef = useFocusManagerRef(ref);\n\n  let { isFocused, focusProps } = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let {\n    groupProps,\n    labelProps,\n    fieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDatePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\n  let timePlaceholder =\n    placeholder && 'hour' in placeholder ? placeholder : undefined;\n  let timeMinValue =\n    props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n  let timeMaxValue =\n    props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n  let timeGranularity =\n    state.granularity === 'hour' ||\n    state.granularity === 'minute' ||\n    state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      qa={qa || 'DatePicker'}\n      inputType=\"datepicker\"\n      styles={styles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement=\"bottom right\"\n          targetRef={targetRef}\n          isOpen={isOpen}\n          shouldFlip={props.shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            <Calendar {...calendarProps} />\n            {showTimeField && (\n              <TimeInput\n                padding=\"1x\"\n                label={t('datePicker.time', 'Time')}\n                value={state.timeValue}\n                placeholderValue={timePlaceholder}\n                granularity={timeGranularity}\n                minValue={timeMinValue}\n                maxValue={timeMaxValue}\n                hourCycle={props.hourCycle}\n                hideTimeZone={props.hideTimeZone}\n                onChange={state.setTimeValue}\n              />\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...fieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DatePicker = forwardRef(DatePicker);\n\n_DatePicker.displayName = 'DatePicker';\n\nexport { _DatePicker as DatePicker };\n"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","names":["FocusableRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","forwardRef","RefObject","useRef","AriaDatePickerProps","DateValue","Placement","useDatePicker","useFocusRing","useDatePickerState","useI18n","FieldBaseProps","mergeProps","extractStyles","useFieldProps","wrapWithField","Calendar","Dialog","DialogTrigger","DateInputBase","DatePickerButton","DatePickerInput","DEFAULT_DATE_PROPS","TimeInput","DateFieldBase","useFocusManagerRef","CubeDatePickerProps","Omit","T","wrapperStyles","inputStyles","triggerStyles","styles","size","maxVisibleMonths","shouldFlip","targetRef","HTMLElement","placement","useLocale","DatePicker","props","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","t1","Object","assign","t2","qa","placeholderValue","isDisabled","isInvalid","isValid","useLocaleProp","autoFocus","state","shouldCloseOnSelect","hasTime","isOpen","setOpen","domRef","t3","within","isTextInput","focusProps","t4","isFocused","isFocusedButton","focusPropsButton","groupProps","labelProps","fieldProps","buttonProps","dialogProps","calendarProps","placeholder","timePlaceholder","undefined","timeMinValue","minValue","timeMaxValue","maxValue","timeGranularity","granularity","showTimeField","t5","t6","t7","t8","t9","t10","t11","t12","hideTimeZone","hourCycle","setTimeValue","timeValue","t13","t14","t15","t16","component","t17","_DatePicker","displayName"],"sources":["../../../../src/components/fields/DatePicker/DatePicker.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n} from '@tenphi/tasty';\nimport { forwardRef, RefObject, useRef } from 'react';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  Placement,\n  useDatePicker,\n  useFocusRing,\n} from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Calendar } from '../../other/Calendar/Calendar';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\n\nimport { DateInputBase } from './DateInputBase';\nimport { DatePickerButton } from './DatePickerButton';\nimport { DatePickerInput } from './DatePickerInput';\nimport { DEFAULT_DATE_PROPS } from './props';\nimport { TimeInput } from './TimeInput';\nimport { DateFieldBase } from './types';\nimport { useFocusManagerRef } from './utils';\n\nexport interface CubeDatePickerProps<T extends DateValue = DateValue>\n  extends Omit<AriaDatePickerProps<T>, 'errorMessage' | 'form' | 'name'>,\n    DateFieldBase<T>,\n    BaseProps,\n    ContainerStyleProps,\n    FieldBaseProps<T | null | undefined> {\n  wrapperStyles?: Styles;\n  inputStyles?: Styles;\n  triggerStyles?: Styles;\n  styles?: Styles;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  maxVisibleMonths?: number;\n  shouldFlip?: boolean;\n  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the field wrapper.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom right'\n   */\n  placement?: Placement;\n  useLocale?: boolean;\n}\n\nfunction DatePicker<T extends DateValue>(\n  props: CubeDatePickerProps<T>,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n  });\n  props = Object.assign({}, DEFAULT_DATE_PROPS, props);\n\n  // The public type declares `ContainerStyleProps` and `styles`, so both have to\n  // reach the root — before this they were extracted and dropped, which made\n  // `width=\"100%\"` type-check and do nothing. `extractStyles` already folds in\n  // `props.styles` and lets the individual style props override it, which is the\n  // precedence every other component uses; re-spreading `props.styles` here\n  // would invert it. `wrapperStyles` stays the most specific and keeps winning.\n  let styles: Styles = {\n    ...extractStyles(props, CONTAINER_STYLES),\n    ...props.wrapperStyles,\n  };\n\n  let {\n    qa,\n    size,\n    placeholderValue,\n    isDisabled,\n    isInvalid,\n    isValid,\n    useLocale: useLocaleProp,\n    autoFocus,\n  } = props;\n  let targetRef = useRef<HTMLDivElement>(null);\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime,\n  });\n  let { isOpen, setOpen } = state;\n\n  let domRef = useFocusManagerRef(ref);\n\n  let { isFocused, focusProps } = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus,\n  });\n\n  let { isFocused: isFocusedButton, focusProps: focusPropsButton } =\n    useFocusRing({\n      within: false,\n      isTextInput: false,\n      autoFocus,\n    });\n\n  let {\n    groupProps,\n    labelProps,\n    fieldProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n  } = useDatePicker(props, state, targetRef);\n\n  let placeholder: DateValue | undefined = placeholderValue;\n  let timePlaceholder =\n    placeholder && 'hour' in placeholder ? placeholder : undefined;\n  let timeMinValue =\n    props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n  let timeMaxValue =\n    props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n  let timeGranularity =\n    state.granularity === 'hour' ||\n    state.granularity === 'minute' ||\n    state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n  // let visibleMonths = useVisibleMonths(maxVisibleMonths);\n\n  const component = (\n    <DateInputBase\n      ref={targetRef}\n      qa={qa || 'DatePicker'}\n      inputType=\"datepicker\"\n      styles={styles}\n      disableFocusRing={isFocusedButton}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      size={size}\n      fieldProps={groupProps}\n      {...focusProps}\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement={props.placement ?? 'bottom right'}\n          targetRef={props.targetRef ?? targetRef}\n          isOpen={isOpen}\n          shouldFlip={props.shouldFlip}\n          onOpenChange={setOpen}\n        >\n          <DatePickerButton\n            size={size}\n            {...mergeProps(buttonProps, focusPropsButton)}\n            isDisabled={isDisabled}\n          />\n          <Dialog {...dialogProps} width=\"max-content\">\n            <Calendar {...calendarProps} />\n            {showTimeField && (\n              <TimeInput\n                padding=\"1x\"\n                label={t('datePicker.time', 'Time')}\n                value={state.timeValue}\n                placeholderValue={timePlaceholder}\n                granularity={timeGranularity}\n                minValue={timeMinValue}\n                maxValue={timeMaxValue}\n                hourCycle={props.hourCycle}\n                hideTimeZone={props.hideTimeZone}\n                onChange={state.setTimeValue}\n              />\n            )}\n          </Dialog>\n        </DialogTrigger>\n      }\n    >\n      <DatePickerInput useLocale={useLocaleProp} {...fieldProps} />\n    </DateInputBase>\n  );\n\n  return wrapWithField(component, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n}\n\nconst _DatePicker = forwardRef(DatePicker);\n\n_DatePicker.displayName = 'DatePicker';\n\nexport { _DatePicker as DatePicker };\n"],"mappings":"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"}

package/dist/components/fields/DatePicker/DatePickerButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";

package/dist/components/fields/DatePicker/DatePickerElement.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 

package/dist/components/fields/DatePicker/DatePickerInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";

package/dist/components/fields/DatePicker/DateRangePicker.d.ts

@@ -3,8 +3,8 @@ import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { DateFieldBase } from "./types.js";
 import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
-import { ReactElement, Ref } from "react";
-import { AriaDateRangePickerProps, DateValue } from "react-aria";
+import { ReactElement, Ref, RefObject } from "react";
+import { AriaDateRangePickerProps, DateValue, Placement } from "react-aria";
 
 //#region src/components/fields/DatePicker/DateRangePicker.d.ts
 interface CubeDateRangePickerProps<T extends DateValue = DateValue> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage' | 'form' | 'name'>, BaseProps, DateFieldBase<T>, ContainerStyleProps, FieldBaseProps<{
@@ -17,6 +17,21 @@ interface CubeDateRangePickerProps<T extends DateValue = DateValue> extends Omit
   size?: 'small' | 'medium' | 'large' | (string & {});
   maxVisibleMonths?: number;
   shouldFlip?: boolean;
+  /**
+   * The ref of the element the popover should visually attach itself to.
+   * Defaults to the field wrapper.
+   *
+   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click
+   * dismissal treats as the trigger.
+   */
+  targetRef?: RefObject<HTMLElement | null>;
+  /**
+   * Placement of the popover relative to the anchor.
+   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,
+   * `'top start'`, `'right top'`, `'left top'`).
+   * @default 'bottom right'
+   */
+  placement?: Placement;
   useLocale?: boolean;
 }
 declare const _DateRangePicker: <T extends DateValue = DateValue>(props: CubeDateRangePickerProps<T> & {