@synerise/ds-color-picker 1.1.0 → 1.1.2

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.1.1...@synerise/ds-color-picker@1.1.2) (2025-03-31)
+
+**Note:** Version bump only for package @synerise/ds-color-picker
+
+
+
+
+
+## [1.1.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.1.0...@synerise/ds-color-picker@1.1.1) (2025-03-26)
+
+
+### Bug Fixes
+
+* **color-picker:** adjust styles, add getPopupContainer ([026303b](https://github.com/Synerise/synerise-design/commit/026303bbf056504eaa42af7c3bf279e0bd59b89a))
+
+
+
+
+
 # [1.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.0.0...@synerise/ds-color-picker@1.1.0) (2025-03-18)
 
 

package/dist/ColorPicker.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { ColorPickerProps } from './ColorPicker.types';
-declare const ColorPicker: ({ maxWidth, value, onChange, colors, onSaveColors, infix, placeholder, inputProps, maxSavedColors, tooltip, isShownSavedColors, size, errorText, description, }: ColorPickerProps) => JSX.Element;
+declare const ColorPicker: ({ maxWidth, value, onChange, colors, onSaveColors, infix, getPopupContainer, placeholder, inputProps, maxSavedColors, tooltip, isShownSavedColors, size, errorText, description, }: ColorPickerProps) => React.JSX.Element;
 export default ColorPicker;

package/dist/ColorPicker.js

@@ -7,7 +7,7 @@ import Icon, { FormulaPlusM, CopyClipboardM } from '@synerise/ds-icon';
 import copy from 'copy-to-clipboard';
 import Tooltip from '@synerise/ds-tooltip';
 import Dropdown from '@synerise/ds-dropdown';
-import { useOnClickOutside } from '@synerise/ds-utils';
+import { useOnClickOutside, getPopupContainer as defaultGetPopupContainer } from '@synerise/ds-utils';
 import { isValidHexColor, isValidTextColor, convert3DigitHexTo6Digit, filterAlphanumeric, standardizeColor } from './utils';
 import ColorPickerStyles from './ColorPicker.styles';
 var DEFAULT_MAX_WIDTH_PICKER = 228;
@@ -23,6 +23,8 @@ var ColorPicker = function ColorPicker(_ref) {
     infix = _ref$infix === void 0 ? function () {
       return /*#__PURE__*/React.createElement(React.Fragment, null);
     } : _ref$infix,
+    _ref$getPopupContaine = _ref.getPopupContainer,
+    getPopupContainer = _ref$getPopupContaine === void 0 ? defaultGetPopupContainer : _ref$getPopupContaine,
     placeholder = _ref.placeholder,
     inputProps = _ref.inputProps,
     _ref$maxSavedColors = _ref.maxSavedColors,
@@ -191,7 +193,8 @@ var ColorPicker = function ColorPicker(_ref) {
     },
     visible: dropdownVisible,
     overlay: dropdown,
-    placement: "bottomLeft"
+    placement: "bottomLeft",
+    getPopupContainer: getPopupContainer
   }, /*#__PURE__*/React.createElement(ColorPickerStyles.ColorPickerSelect, _extends({
     "data-testid": "color-picker",
     prefix: /*#__PURE__*/React.createElement(ColorPickerStyles.ColorTag, {

package/dist/ColorPicker.styles.js

@@ -16,7 +16,7 @@ var SIZE_DEFAULT = 168;
 var Container = styled.div.withConfig({
   displayName: "ColorPickerstyles__Container",
   componentId: "sc-1iu8b6j-1"
-})(["width:100%;@media (min-width:200px){min-width:200px;margin:-8px;background-color:", ";}.react-colorful__last-control{margin:24px 56px 8px 17px;border-radius:4px;height:8px;}.react-colorful__saturation{border-bottom:0px;border-radius:4px 4px 0 0;height:96px;.react-colorful__interactive{width:100%;height:100%;}}&&& .ds-tag{width:16px;height:16px;border:1px solid ", ";margin:0 0 0 4px;&:hover{", "{display:flex;}}}.react-colorful__pointer{width:16px;height:16px;}.react-colorful{width:100%;height:", "px;}.react-colorful__hue-pointer{border:1px solid ", ";box-shadow:none !important;.react-colorful__pointer-fill{background-color:", " !important;}}.ant-divider-horizontal{margin:16px 0px;}", "{margin-bottom:-8px;}"], function (props) {
+})(["width:100%;@media (min-width:200px){min-width:200px;background-color:", ";}.react-colorful__last-control{margin:24px 56px 8px 17px;border-radius:4px;height:8px;}.react-colorful__saturation{border-bottom:0px;border-radius:4px 4px 0 0;height:96px;.react-colorful__interactive{width:100%;height:100%;}}&&& .ds-tag{width:16px;height:16px;border:1px solid ", ";margin:0 0 0 4px;&:hover{", "{display:flex;}}}.react-colorful__pointer{width:16px;height:16px;}.react-colorful{width:100%;height:", "px;}.react-colorful__hue-pointer{border:1px solid ", ";box-shadow:none !important;.react-colorful__pointer-fill{background-color:", " !important;}}.ant-divider-horizontal{margin:16px 0px;}", "{margin-bottom:-8px;}"], function (props) {
   return props.theme.palette.white;
 }, function (props) {
   return props.theme.palette['grey-300'];

package/dist/ColorPicker.types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { InputProps } from 'antd/lib/input';
+import { DropdownProps } from '@synerise/ds-dropdown';
 export type ColorHookType = {
     color: string;
     setColor: (color: string) => void;
@@ -9,7 +10,7 @@ export declare enum ColorPickerSize {
     'M' = 168,
     'L' = 200
 }
-export interface ColorPickerProps extends Partial<Pick<HTMLInputElement, 'placeholder'>> {
+export type ColorPickerProps = {
     maxWidth?: number;
     value?: string;
     onChange?: (color: string) => void;
@@ -30,4 +31,4 @@ export interface ColorPickerProps extends Partial<Pick<HTMLInputElement, 'placeh
     size?: 'S' | 'M' | 'L';
     errorText?: string;
     description?: string;
-}
+} & Partial<Pick<HTMLInputElement, 'placeholder'>> & Partial<Pick<DropdownProps, 'getPopupContainer'>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-color-picker",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Color-Picker Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,13 +34,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.1.0",
-    "@synerise/ds-divider": "^1.0.1",
-    "@synerise/ds-dropdown": "^1.0.1",
-    "@synerise/ds-icon": "^1.0.1",
-    "@synerise/ds-input": "^1.0.1",
-    "@synerise/ds-tags": "^1.1.0",
-    "@synerise/ds-tooltip": "^1.1.0",
+    "@synerise/ds-button": "^1.1.2",
+    "@synerise/ds-divider": "^1.0.3",
+    "@synerise/ds-dropdown": "^1.0.3",
+    "@synerise/ds-icon": "^1.2.0",
+    "@synerise/ds-input": "^1.0.3",
+    "@synerise/ds-tags": "^1.1.2",
+    "@synerise/ds-tooltip": "^1.1.2",
     "@synerise/ds-utils": "^1.0.1",
     "copy-to-clipboard": "^3.3.1",
     "react-colorful": "^5.2.0"
@@ -51,5 +51,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "218110f61f4371bc04d793b2b976b71d14e99e76"
+  "gitHead": "5438445467b16dbc0c2ca97d969ae0e09b74131b"
 }