@synerise/ds-color-picker 1.0.0 → 1.1.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### Features
+
+* **button:** add support for tag in button ([32b6956](https://github.com/Synerise/synerise-design/commit/32b6956d5e1f46df03abb4de8fbaf0a7d487043e))
+
+
+
+
+
 ## [0.4.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@0.4.8...@synerise/ds-color-picker@0.4.9) (2025-03-10)
 
 **Note:** Version bump only for package @synerise/ds-color-picker

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.d.ts

@@ -3,12 +3,7 @@ import Button from '@synerise/ds-button';
 export declare const TagDot: import("styled-components").StyledComponent<"div", any, {
     pressed?: boolean | undefined;
 }, never>;
-export declare const ColorTag: import("styled-components").StyledComponent<{
-    ({ id, name, className, disabled, removable, image, shape, color, textColor, onRemove, onClick, prefixel, suffixel, texts, asPill, dashed, ...htmlAttributes }: import("@synerise/ds-tags/dist/Tag/Tag.types").TagProps): import("react").JSX.Element;
-    defaultProps: {
-        shape: import("@synerise/ds-tags").TagShape;
-    };
-}, any, {}, never>;
+export declare const ColorTag: import("styled-components").StyledComponent<({ id, name, className, disabled, removable, image, shape, color, textColor, onRemove, onClick, prefixel, suffixel, texts, asPill, dashed, ...htmlAttributes }: import("@synerise/ds-tags").TagProps) => import("react").JSX.Element, any, {}, never>;
 export declare const AddColorButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
 export declare const CopyIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => import("react").JSX.Element, any, {}, never>;
 export declare const ColorPickerInput: import("styled-components").StyledComponent<({ className, errorText, label, description, counterLimit, tooltip, tooltipConfig, icon1, icon1Tooltip, autoResize, icon2, icon2Tooltip, resetMargin, handleInputRef, prefixel, suffixel, error, expandable, expandableTooltip, renderCustomCounter, ...antdInputProps }: import("@synerise/ds-input").InputProps) => import("react").JSX.Element, any, {}, never>;
@@ -30,12 +25,7 @@ declare const _default: {
     SubContainer: import("styled-components").StyledComponent<"div", any, {
         savedColors?: boolean | undefined;
     }, never>;
-    ColorTag: import("styled-components").StyledComponent<{
-        ({ id, name, className, disabled, removable, image, shape, color, textColor, onRemove, onClick, prefixel, suffixel, texts, asPill, dashed, ...htmlAttributes }: import("@synerise/ds-tags/dist/Tag/Tag.types").TagProps): import("react").JSX.Element;
-        defaultProps: {
-            shape: import("@synerise/ds-tags").TagShape;
-        };
-    }, any, {}, never>;
+    ColorTag: import("styled-components").StyledComponent<({ id, name, className, disabled, removable, image, shape, color, textColor, onRemove, onClick, prefixel, suffixel, texts, asPill, dashed, ...htmlAttributes }: import("@synerise/ds-tags").TagProps) => import("react").JSX.Element, any, {}, never>;
     PrefixTag: import("styled-components").StyledComponent<"div", any, {
         height?: boolean | undefined;
         size?: "S" | "M" | "L" | undefined;

package/dist/ColorPicker.styles.js

@@ -1,5 +1,4 @@
 import styled, { createGlobalStyle } from 'styled-components';
-// @ts-ignore
 import { TagsStyles, Tag } from '@synerise/ds-tags';
 import Button from '@synerise/ds-button';
 import Icon from '@synerise/ds-icon';
@@ -17,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.0.0",
+  "version": "1.1.1",
   "description": "Color-Picker Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,14 +34,14 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.0.0",
-    "@synerise/ds-divider": "^1.0.0",
-    "@synerise/ds-dropdown": "^1.0.0",
-    "@synerise/ds-icon": "^1.0.0",
-    "@synerise/ds-input": "^1.0.0",
-    "@synerise/ds-tags": "^1.0.0",
-    "@synerise/ds-tooltip": "^1.0.0",
-    "@synerise/ds-utils": "^1.0.0",
+    "@synerise/ds-button": "^1.1.1",
+    "@synerise/ds-divider": "^1.0.2",
+    "@synerise/ds-dropdown": "^1.0.2",
+    "@synerise/ds-icon": "^1.1.0",
+    "@synerise/ds-input": "^1.0.2",
+    "@synerise/ds-tags": "^1.1.1",
+    "@synerise/ds-tooltip": "^1.1.1",
+    "@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": "e4c3690238a44b584b9ea41e4aa52b1eec42174b"
+  "gitHead": "47960dcd849dc47c85bd134bcfeb90a5505656a7"
 }