@ssa-ui-kit/core 2.18.2 → 2.19.0

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -1,18 +1,3 @@
+import { ColorPickerProps } from './types';
 import '@rc-component/color-picker/assets/index.css';
-declare const COLOR_FORMAT: {
-    readonly hex: "HEX";
-    readonly rgb: "RGB";
-    readonly hsl: "HSL";
-};
-type ColorFormat = keyof typeof COLOR_FORMAT;
-export interface ColorPickerProps {
-    defaultColor?: string;
-    color?: string;
-    disabledAlpha?: boolean;
-    disabled?: boolean;
-    format?: ColorFormat;
-    defaultFormat?: ColorFormat;
-    onChange?: (color: string) => void;
-}
-export declare const ColorPicker: ({ color: providedColor, defaultColor, disabledAlpha, disabled, format: providedFormat, defaultFormat, onChange, }: ColorPickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
+export declare const ColorPicker: ({ color: providedColor, format: providedFormat, colorsPalette, ...rest }: ColorPickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/ColorPicker/ColorPickerContext.d.ts

@@ -0,0 +1,4 @@
+import { ColorPickerProviderOutputProps, ColorPickerProviderInputProps } from './types';
+export declare const ColorPickerContext: import("react").Context<ColorPickerProviderOutputProps>;
+export declare const ColorPickerProvider: ({ children, providedColor, providedFormat, defaultColor, defaultFormat, classnames, disabledAlpha, disabled, label, colorsPalette, onChange, }: React.PropsWithChildren<ColorPickerProviderInputProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const useColorPickerContext: () => ColorPickerProviderOutputProps;

package/dist/components/ColorPicker/components/ColorPickerTrigger.d.ts

@@ -0,0 +1 @@
+export declare const ColorPickerTrigger: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/ColorPicker/components/TabColorPalette.d.ts

@@ -0,0 +1 @@
+export declare const TabColorPalette: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/ColorPicker/components/TabColorPicker.d.ts

@@ -0,0 +1 @@
+export declare const TabColorPicker: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/ColorPicker/components/TabContent.d.ts

@@ -0,0 +1 @@
+export declare const TabContent: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/ColorPicker/components/index.d.ts

@@ -3,3 +3,6 @@ export * from './HlsInput';
 export * from './RgbInput';
 export * from './CopyButton';
 export * from './ColorDropdown';
+export * from './TabColorPicker';
+export * from './TabColorPalette';
+export * from './TabContent';

package/dist/components/ColorPicker/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const COLOR_FORMAT: {
+    readonly hex: "HEX";
+    readonly rgb: "RGB";
+    readonly hsl: "HSL";
+};
+export declare const COLORS_PALETTE: string[];

package/dist/components/ColorPicker/types.d.ts

@@ -0,0 +1,37 @@
+import { Color } from '@rc-component/color-picker';
+import { SmallTabProps, TabProps } from '../TabBar/types';
+import { COLOR_FORMAT } from './constants';
+export type ColorFormat = keyof typeof COLOR_FORMAT;
+export interface ColorPickerProps {
+    defaultColor?: string;
+    defaultFormat?: ColorFormat;
+    disabledAlpha?: boolean;
+    disabled?: boolean;
+    color?: string;
+    format?: ColorFormat;
+    label?: string;
+    colorsPalette?: string[];
+    classnames?: {
+        trigger?: string;
+        content?: string;
+        button?: string;
+        colorPicker?: string;
+        colorDropdown?: string;
+        output?: string;
+    };
+    onChange?: (color: string) => void;
+}
+export type ColorPickerProviderInputProps = Omit<ColorPickerProps, 'color' | 'format'> & {
+    providedColor: ColorPickerProps['color'];
+    providedFormat: ColorPickerProps['format'];
+};
+export type ColorPickerProviderOutputProps = Omit<ColorPickerProps, 'color'> & {
+    rawColor?: string | Color;
+    format: ColorFormat;
+    copy: (valueToCopy: string) => void;
+    setRawColor: (color: string | Color) => void;
+    setFormat: (format: ColorFormat) => void;
+};
+export type ColorPickerTabProps = Pick<TabProps, 'tabId' | 'isActive' | 'ariaControls' | 'onClick'> & Pick<SmallTabProps, 'text'> & {
+    isActive?: boolean;
+};

package/dist/components/ColorPicker/utils.d.ts

@@ -0,0 +1,3 @@
+import { Color } from '@rc-component/color-picker';
+import { ColorFormat } from './types';
+export declare const colorFormatter: Record<ColorFormat, (color: Color) => string>;

package/dist/components/TabBar/TabBar.d.ts

@@ -6,5 +6,5 @@ import { TabBarProps } from './types';
  * component to decide where to render the contents of the
  * selected tab.
  * */
-declare const TabBar: ({ children }: TabBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TabBar: ({ children, className }: TabBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default TabBar;

package/dist/components/TabBar/types.d.ts

@@ -19,6 +19,7 @@ export interface LargeTabProps extends TabProps {
 }
 export interface TabBarProps {
     children: React.ReactElement<React.PropsWithChildren<TabProps>>[];
+    className?: string;
 }
 export interface TabBarContextProps {
     activeTab?: TabProps;

package/dist/index.js

@@ -7435,7 +7435,8 @@ const TabBarBase = /*#__PURE__*/base_default()("div",  true ? {
  * selected tab.
  * */
 const TabBar = ({
-  children
+  children,
+  className
 }) => {
   const {
     activeTab,
@@ -7444,6 +7445,7 @@ const TabBar = ({
   const activeTabId = activeTab?.tabId;
   return (0,jsx_runtime_namespaceObject.jsx)(TabBarBase, {
     role: "tablist",
+    className: className,
     children: external_react_namespaceObject.Children.map(children, child => {
       // istanbul ignore else
       if (/*#__PURE__*/(0,external_react_namespaceObject.isValidElement)(child)) {
@@ -8173,13 +8175,12 @@ const AddNewAccountCard = ({
 
 ;// ./src/components/ButtonGroup/styles.ts
 
-const ButtonItem = theme => /*#__PURE__*/(0,react_namespaceObject.css)("justify-content:center;min-width:40px;height:auto;padding:8px;text-align:center;letter-spacing:0em;border-radius:0;box-shadow:none;user-select:none;&:hover,&:focus,&:active{box-shadow:none;}&:first-of-type{border-radius:6px 0 0 6px;}&:last-child{border-radius:0 6px 6px 0;}&:not(:last-child){margin-right:1px;}&.active{background:", theme.colors.greyFocused, ";}&:disabled{background:", theme.colors.grey, ";p{color:", theme.colors.grey40, ";}}", theme.mediaQueries.md, "{min-width:65px;padding:12px;p{font-size:13.3px;line-height:15px;}}" + ( true ? "" : 0),  true ? "" : 0);
+const ButtonItem = theme => /*#__PURE__*/(0,react_namespaceObject.css)("justify-content:center;min-width:40px;height:auto;padding:8px;text-align:center;letter-spacing:0em;border-radius:0;box-shadow:none;user-select:none;font-size:0.694rem;line-height:0.938rem;font-style:normal;font-weight:500;&:hover,&:focus,&:active{box-shadow:none;}&:first-of-type{border-radius:6px 0 0 6px;}&:last-child{border-radius:0 6px 6px 0;}&:not(:last-child){margin-right:1px;}&.active{background:", theme.colors.greyFocused, ";}&:disabled{background:", theme.colors.grey, ";color:", theme.colors.grey40, ";}", theme.mediaQueries.md, "{min-width:65px;padding:12px;font-size:13.3px;line-height:15px;}" + ( true ? "" : 0),  true ? "" : 0);
 ;// ./src/components/ButtonGroup/ButtonGroup.tsx
 
 
 
 
-
 const ButtonGroup = ({
   items,
   buttonStyles,
@@ -8207,10 +8208,7 @@ const ButtonGroup = ({
         onClick: handleClick(item),
         css: [ButtonItem, buttonStyles,  true ? "" : 0,  true ? "" : 0],
         className: isActive ? 'active' : '',
-        children: (0,jsx_runtime_namespaceObject.jsx)(Typography_Typography, {
-          variant: "body1",
-          children: item.text
-        })
+        children: item.text
       }, item.id);
     })
   });
@@ -11762,11 +11760,131 @@ const CollapsibleNavBarCustomIconSVG = ({
 
 
 
-;// external "@emotion/css"
-const css_namespaceObject = require("@emotion/css");
 ;// external "@rc-component/color-picker"
 const color_picker_namespaceObject = require("@rc-component/color-picker");
 var color_picker_default = /*#__PURE__*/__webpack_require__.n(color_picker_namespaceObject);
+;// ./src/components/ColorPicker/utils.ts
+const colorFormatter = {
+  hex: color => color.toHexString(),
+  rgb: color => color.toRgbString(),
+  hsl: color => color.toHslString()
+};
+;// ./src/components/ColorPicker/ColorPickerContext.tsx
+
+
+
+
+
+const ColorPickerContext = /*#__PURE__*/(0,external_react_namespaceObject.createContext)({
+  format: 'hex',
+  rawColor: undefined,
+  copy() {
+    // no-op
+  },
+  setFormat() {
+    // no-op
+  },
+  setRawColor() {
+    // no-op
+  }
+});
+const ColorPickerProvider = ({
+  children,
+  providedColor,
+  providedFormat,
+  defaultColor,
+  defaultFormat,
+  classnames,
+  disabledAlpha,
+  disabled,
+  label,
+  colorsPalette,
+  onChange
+}) => {
+  const {
+    copy
+  } = (0,hooks_namespaceObject.useClipboard)();
+  const [format, setFormat] = (0,hooks_namespaceObject.useUncontrolled)({
+    value: providedFormat,
+    defaultValue: defaultFormat,
+    finalValue: 'hex'
+  });
+  const [rawColor, setRawColor] = (0,hooks_namespaceObject.useUncontrolled)({
+    value: providedColor,
+    defaultValue: defaultColor,
+    onChange: color => {
+      if (color) {
+        onChange?.(colorFormatter[format](new color_picker_namespaceObject.Color(color)));
+      }
+    }
+  });
+  return (0,jsx_runtime_namespaceObject.jsx)(ColorPickerContext.Provider, {
+    value: {
+      defaultColor,
+      defaultFormat,
+      format,
+      rawColor,
+      classnames,
+      disabledAlpha,
+      disabled,
+      label,
+      colorsPalette,
+      copy,
+      setFormat,
+      setRawColor,
+      onChange
+    },
+    children: children
+  });
+};
+const useColorPickerContext = () => {
+  const context = (0,external_react_namespaceObject.useContext)(ColorPickerContext);
+  if (!context) {
+    throw new Error('useColorPickerContext must be used within a ColorPickerProvider');
+  }
+  return context;
+};
+;// ./src/components/ColorPicker/components/TabColorPalette.tsx
+
+
+function TabColorPalette_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+const TabColorPaletteItem = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
+  target: "et6h5v0"
+} : 0)("width:28px;height:28px;border-radius:4px;cursor:pointer;border:1px solid ", ({
+  theme
+}) => theme.colors.greySelectedMenuItem, ";" + ( true ? "" : 0));
+var TabColorPalette_ref =  true ? {
+  name: "dzb9g1",
+  styles: "gap:16px;width:248px;height:240px;align-items:flex-start;align-content:flex-start;flex-wrap:wrap"
+} : 0;
+const TabColorPalette = () => {
+  const {
+    setRawColor,
+    colorsPalette
+  } = useColorPickerContext();
+  const handleColorSelect = event => {
+    const target = event.currentTarget;
+    const selectedColor = target.getAttribute('data-color');
+    if (selectedColor) {
+      setRawColor(selectedColor);
+    }
+  };
+  return (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
+    css: TabColorPalette_ref,
+    children: colorsPalette?.map(color => (0,jsx_runtime_namespaceObject.jsx)(TabColorPaletteItem, {
+      "data-color": color,
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        backgroundColor: color
+      },  true ? "" : 0,  true ? "" : 0),
+      onClick: handleColorSelect
+    }, color))
+  });
+};
+;// external "@emotion/css"
+const css_namespaceObject = require("@emotion/css");
 ;// ./src/components/ColorPicker/components/BaseInput.tsx
 
 function BaseInput_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -11963,11 +12081,16 @@ const CopyButton = /*#__PURE__*/base_default()(Button_Button,  true ? {
 }) => theme.colors.grey, ";&:hover,&:focus{background:none;box-shadow:none;&::before{display:none;}}&:hover{svg path{fill:", ({
   theme
 }) => theme.colors.greyDarker, ";}}" + ( true ? "" : 0));
-;// external "@rc-component/color-picker/assets/index.css"
-const index_css_namespaceObject = require("@rc-component/color-picker/assets/index.css");
-;// ./src/components/ColorPicker/ColorPicker.tsx
-function ColorPicker_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+;// ./src/components/ColorPicker/constants.ts
+const COLOR_FORMAT = {
+  hex: 'HEX',
+  rgb: 'RGB',
+  hsl: 'HSL'
+};
+const COLORS_PALETTE = ['#F463EA', '#BE49EC', '#9260FC', '#5B8DEC', '#4CBFFD', '#62E1F7', '#2CBB97', '#5FC855', '#99E176', '#CEEC83', '#F9F789', '#FDE47D', '#FDC67D', '#FFA069', '#FF7379'];
+;// ./src/components/ColorPicker/components/TabColorPicker.tsx
 
+function TabColorPicker_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
 
@@ -11977,51 +12100,29 @@ function ColorPicker_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried t
 
 
 
-const COLOR_FORMAT = {
-  hex: 'HEX',
-  rgb: 'RGB',
-  hsl: 'HSL'
-};
-const colorFormatter = {
-  hex: color => color.toHexString(),
-  rgb: color => color.toRgbString(),
-  hsl: color => color.toHslString()
-};
-var ColorPicker_ref =  true ? {
-  name: "16s5rj8",
-  styles: "width:280px"
+
+
+var TabColorPicker_ref =  true ? {
+  name: "qsz8ux",
+  styles: "width:248px;box-shadow:none;padding:0;& .rc-color-picker-slider-container{padding-left:4px;}"
 } : 0;
-var ColorPicker_ref2 =  true ? {
+var TabColorPicker_ref2 =  true ? {
   name: "71zmeu",
   styles: "justify-content:space-between;gap:5px"
 } : 0;
-const ColorPicker = ({
-  color: providedColor,
-  defaultColor,
-  disabledAlpha,
-  disabled,
-  format: providedFormat,
-  defaultFormat,
-  onChange
-}) => {
+const TabColorPicker = () => {
   const theme = (0,react_namespaceObject.useTheme)();
-  const [format, setFormat] = (0,hooks_namespaceObject.useUncontrolled)({
-    value: providedFormat,
-    defaultValue: defaultFormat,
-    finalValue: 'hex'
-  });
-  const [rawColor, setRawColor] = (0,hooks_namespaceObject.useUncontrolled)({
-    value: providedColor,
-    defaultValue: defaultColor,
-    onChange: color => {
-      if (color) {
-        onChange?.(colorFormatter[format](new color_picker_namespaceObject.Color(color)));
-      }
-    }
-  });
   const {
-    copy
-  } = (0,hooks_namespaceObject.useClipboard)();
+    rawColor,
+    disabled,
+    disabledAlpha,
+    classnames,
+    format,
+    copy,
+    onChange,
+    setFormat,
+    setRawColor
+  } = useColorPickerContext();
   const parsedColor = rawColor ? new color_picker_namespaceObject.Color(rawColor) : undefined;
   const handleFormatSelect = format => {
     onChange?.(colorFormatter[format](new color_picker_namespaceObject.Color(rawColor)));
@@ -12046,16 +12147,17 @@ const ColorPicker = ({
     onChange: setRawColor,
     disabledAlpha: disabledAlpha,
     disabled: disabled,
-    css: ColorPicker_ref,
+    css: TabColorPicker_ref,
+    className: classnames?.colorPicker,
     panelRender: panel => (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
       children: [panel, (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
         alignItems: "center",
-        css: ColorPicker_ref2,
+        css: TabColorPicker_ref2,
         children: [(0,jsx_runtime_namespaceObject.jsx)(ColorDropdown, {
-          className: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
+          className: [/*#__PURE__*/(0,css_namespaceObject.css)( true ? {
             name: "2746za",
             styles: "height:28px"
-          } : 0),
+          } : 0), classnames?.colorDropdown].join(' '),
           selectedItem: {
             value: COLOR_FORMAT[format],
             id: format
@@ -12073,6 +12175,7 @@ const ColorPicker = ({
             overflow: 'hidden',
             alignSelf: 'stretch'
           },  true ? "" : 0,  true ? "" : 0),
+          className: classnames?.output,
           children: Input[format]()
         }), (0,jsx_runtime_namespaceObject.jsx)(CopyButton, {
           variant: "tertiary",
@@ -12088,6 +12191,136 @@ const ColorPicker = ({
     })
   });
 };
+;// ./src/components/ColorPicker/components/TabContent.tsx
+
+
+
+
+const TabContent = () => {
+  const {
+    activeTab
+  } = useTabBarContext();
+  return (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+    children: [activeTab?.tabId === 'color-picker' && (0,jsx_runtime_namespaceObject.jsx)(TabColorPicker, {}), activeTab?.tabId === 'color-palette' && (0,jsx_runtime_namespaceObject.jsx)(TabColorPalette, {})]
+  });
+};
+;// ./src/components/ColorPicker/components/ColorPickerTrigger.tsx
+function ColorPickerTrigger_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+
+
+
+var ColorPickerTrigger_ref =  true ? {
+  name: "1ue162o",
+  styles: "padding:0;height:20px;min-width:20px;font-size:16px;font-weight:500;gap:8px"
+} : 0;
+const ColorPickerTrigger = () => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const {
+    classnames,
+    rawColor,
+    label
+  } = useColorPickerContext();
+  return (0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
+    asChild: true,
+    className: classnames?.trigger,
+    children: (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+      variant: "tertiary",
+      className: classnames?.button,
+      "data-testid": "color-picker-trigger",
+      css: ColorPickerTrigger_ref,
+      startIcon: (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
+        css: /*#__PURE__*/(0,react_namespaceObject.css)({
+          width: 20,
+          height: 20,
+          background: rawColor && new color_picker_namespaceObject.Color(rawColor).toRgbString(),
+          borderRadius: 4,
+          border: `1px solid ${theme.colors.greySelectedMenuItem}`,
+          '&:hover': {
+            border: `1px solid ${theme.colors.grey}`
+          },
+          '&:active': {
+            border: `1px solid ${theme.colors.greyBackground}`
+          }
+        },  true ? "" : 0,  true ? "" : 0)
+      }),
+      children: label
+    })
+  });
+};
+;// external "@rc-component/color-picker/assets/index.css"
+const index_css_namespaceObject = require("@rc-component/color-picker/assets/index.css");
+;// ./src/components/ColorPicker/ColorPicker.tsx
+function ColorPicker_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+
+
+
+
+
+var ColorPicker_ref =  true ? {
+  name: "dl37cv",
+  styles: "gap:16px;padding:16px;border-radius:8px;box-shadow:0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05)"
+} : 0;
+var ColorPicker_ref2 =  true ? {
+  name: "xyzkeb",
+  styles: "align-self:flex-start"
+} : 0;
+const ColorPicker = ({
+  color: providedColor,
+  format: providedFormat,
+  colorsPalette = COLORS_PALETTE,
+  ...rest
+}) => {
+  const tabsConfig = {
+    colorPalette: {
+      tabId: 'color-palette',
+      ariaControls: 'color-palette-panel',
+      text: 'General',
+      renderContent: TabColorPalette
+    },
+    colorPicker: {
+      tabId: 'color-picker',
+      ariaControls: 'color-picker-panel',
+      text: 'Custom',
+      renderContent: TabColorPicker
+    }
+  };
+  return (0,jsx_runtime_namespaceObject.jsx)(TabBarContextProvider, {
+    initialTab: {
+      tabId: tabsConfig.colorPalette.tabId,
+      renderContent: tabsConfig.colorPalette.renderContent
+    },
+    children: (0,jsx_runtime_namespaceObject.jsx)(ColorPickerProvider, {
+      providedColor: providedColor,
+      providedFormat: providedFormat,
+      colorsPalette: colorsPalette,
+      ...rest,
+      children: (0,jsx_runtime_namespaceObject.jsxs)(Popover, {
+        interactionsEnabled: 'click',
+        placement: 'top-start',
+        children: [(0,jsx_runtime_namespaceObject.jsx)(ColorPickerTrigger, {}), (0,jsx_runtime_namespaceObject.jsxs)(PopoverContent, {
+          css: ColorPicker_ref,
+          className: rest.classnames?.content,
+          children: [(0,jsx_runtime_namespaceObject.jsxs)(TabBar_TabBar, {
+            css: ColorPicker_ref2,
+            children: [(0,jsx_runtime_namespaceObject.jsx)(Tab_Tab, {
+              ...tabsConfig.colorPalette
+            }), (0,jsx_runtime_namespaceObject.jsx)(Tab_Tab, {
+              ...tabsConfig.colorPicker
+            })]
+          }), (0,jsx_runtime_namespaceObject.jsx)(TabContent, {})]
+        })]
+      })
+    })
+  });
+};
 ;// ./src/components/ColorPicker/index.ts
 
 ;// ./src/components/DatePicker/constants.ts