@ssa-ui-kit/core 2.19.1 → 2.20.0

package/dist/index.js

@@ -136,6 +136,7 @@ __webpack_require__.d(__webpack_exports__, {
   MultipleDropdownNotification: () => (/* reexport */ MultipleDropdownNotification_MultipleDropdownNotification),
   MultipleDropdownOptions: () => (/* reexport */ MultipleDropdownOptions_MultipleDropdownOptions),
   NavBar: () => (/* reexport */ NavBar),
+  NestedTable: () => (/* reexport */ NestedTable),
   NestedTableCell: () => (/* reexport */ NestedTableCell),
   NestedTableCellSubHeader: () => (/* reexport */ NestedTableCellSubHeader),
   NestedTableRow: () => (/* reexport */ NestedTableRow),
@@ -190,6 +191,7 @@ __webpack_require__.d(__webpack_exports__, {
   Table: () => (/* reexport */ Table_Table),
   TableBody: () => (/* reexport */ TableBody_TableBody),
   TableCell: () => (/* reexport */ TableCell_TableCell),
+  TableCellHeader: () => (/* reexport */ TableCellHeader_TableCellHeader),
   TableFilterCheckbox: () => (/* reexport */ TableFilterCheckbox),
   TableFilterTrigger: () => (/* reexport */ TableFilterTrigger),
   TableFilterTriggerWithNotification: () => (/* reexport */ TableFilterTriggerWithNotification),
@@ -7473,8 +7475,8 @@ function Table_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stri
 const Table = /*#__PURE__*/base_default()("table",  true ? {
   target: "ef55xbt0"
 } : 0)( true ? {
-  name: "1suweh2",
-  styles: "display:table;width:100%;border-collapse:collapse;border-spacing:0"
+  name: "1qa51hv",
+  styles: "display:table;width:100%;border-collapse:collapse;border-spacing:0;background:none"
 } : 0);
 /* harmony default export */ const Table_Table = (Table);
 ;// ./src/components/TableBody/TableBody.tsx
@@ -7483,8 +7485,8 @@ function TableBody_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to
 const TableBody = /*#__PURE__*/base_default()("tbody",  true ? {
   target: "erj4fs00"
 } : 0)( true ? {
-  name: "xfuyo9",
-  styles: "display:table-row-group"
+  name: "96lg8t",
+  styles: "display:table-row-group;& tr:last-child td:first-of-type{border-bottom-left-radius:20px;}& tr:last-child td:last-child{border-bottom-right-radius:20px;}& tr:not([aria-disabled='true']):hover{& td{background-color:#eef1f7;}}"
 } : 0);
 /* harmony default export */ const TableBody_TableBody = (TableBody);
 ;// ./src/components/TableCell/TableCell.tsx
@@ -7493,31 +7495,37 @@ const TableCell = /*#__PURE__*/base_default()("td",  true ? {
   target: "e9xnb9j0"
 } : 0)("display:table-cell;vertical-align:inherit;text-align:", ({
   align
-}) => align ? align : 'left', ";border-bottom:1px solid #eef1f7;border-right:1px solid #eef1f7;padding:14px;" + ( true ? "" : 0));
+}) => align ? align : 'left', ";border:none;padding:0 16px;background:#fff;font-size:12px;font-weight:500;white-space:nowrap;height:44px;& a{display:flex;align-items:center;height:44px;padding:0 18px;}&:first-of-type a{padding-left:16px;}", ({
+  theme
+}) => theme.mediaQueries.lg, "{font-size:14px;}" + ( true ? "" : 0));
 /* harmony default export */ const TableCell_TableCell = (TableCell);
-;// ./src/components/TableHead/TableHead.tsx
+;// ./src/components/TableCellHeader/TableCellHeader.tsx
 
 
+const TableCellHeader = props => (0,jsx_runtime_namespaceObject.jsx)(TableCell_TableCell, {
+  as: "th",
+  ...props
+});
+/* harmony default export */ const TableCellHeader_TableCellHeader = (TableCellHeader);
+;// ./src/components/TableHead/TableHead.tsx
+
 const TableHead = /*#__PURE__*/base_default()("thead",  true ? {
   target: "e1ezyu020"
-} : 0)({
-  display: 'table-header-group',
-  background: '#eef1f7',
-  [`& ${TableCell_TableCell}`]: {
-    borderBottom: '1px solid white',
-    borderRight: '1px solid white'
-  }
-},  true ? "" : 0);
+} : 0)("display:table-header-group;background:none;font-size:12px;& tr{box-shadow:inset 0 -1px 0 #eaecf0;white-space:nowrap;font-weight:700;&:first-of-type{border-top-left-radius:20px;}&:last-child{cursor:default;border-top-right-radius:20px;}& td,& th{font-weight:700;box-shadow:rgb(234, 236, 240) 0 -1px 0 inset;&:first-of-type{padding-left:16px;border-top-left-radius:20px;}&:last-child{border-top-right-radius:20px;}}}", ({
+  theme
+}) => theme.mediaQueries.lg, "{font-size:14px;}" + ( true ? "" : 0));
 /* harmony default export */ const TableHead_TableHead = (TableHead);
 ;// ./src/components/TableRow/TableRow.tsx
 
-function TableRow_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 TableRow = /*#__PURE__*/base_default()("tr",  true ? {
   target: "epe3ucm0"
-} : 0)( true ? {
-  name: "1cb05rb",
-  styles: "display:table-row;outline:0;vertical-align:middle"
-} : 0);
+} : 0)("display:table-row;outline:0;vertical-align:middle;border:none;padding:0 16px;height:44px;& tr:first-of-type{padding-left:18px;}", ({
+  isDisabled
+}) => isDisabled && {
+  opacity: 0.6,
+  cursor: 'default',
+  userSelect: 'none'
+}, ";" + ( true ? "" : 0));
 /* harmony default export */ const TableRow_TableRow = (TableRow);
 ;// ./src/components/Tag/styles.ts
 
@@ -12255,8 +12263,6 @@ const ColorPickerTrigger = () => {
     })
   });
 };
-;// 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)."; }
 
@@ -12269,10 +12275,6 @@ function ColorPicker_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried t
 
 
 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;
@@ -12282,6 +12284,7 @@ const ColorPicker = ({
   colorsPalette = COLORS_PALETTE,
   ...rest
 }) => {
+  const theme = (0,react_namespaceObject.useTheme)();
   const tabsConfig = {
     colorPalette: {
       tabId: 'color-palette',
@@ -12310,10 +12313,17 @@ const ColorPicker = ({
         interactionsEnabled: 'click',
         placement: 'top-start',
         children: [(0,jsx_runtime_namespaceObject.jsx)(ColorPickerTrigger, {}), (0,jsx_runtime_namespaceObject.jsxs)(PopoverContent, {
-          css: ColorPicker_ref,
+          css: /*#__PURE__*/(0,react_namespaceObject.css)({
+            gap: 16,
+            padding: 16,
+            borderRadius: 8,
+            backgroundColor: theme.colors.white,
+            zIndex: 10,
+            boxShadow: '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)'
+          },  true ? "" : 0,  true ? "" : 0),
           className: rest.classnames?.content,
           children: [(0,jsx_runtime_namespaceObject.jsxs)(TabBar_TabBar, {
-            css: ColorPicker_ref2,
+            css: ColorPicker_ref,
             children: [(0,jsx_runtime_namespaceObject.jsx)(Tab_Tab, {
               ...tabsConfig.colorPalette
             }), (0,jsx_runtime_namespaceObject.jsx)(Tab_Tab, {
@@ -13170,6 +13180,7 @@ const DatePickerMonthsSwitch = () => {
     calendarViewDateTime,
     dateMinDT,
     dateMaxDT,
+    classNames,
     setCalendarViewDateTime,
     onMonthChange
   } = useDatePickerContext();
@@ -13200,6 +13211,7 @@ const DatePickerMonthsSwitch = () => {
   }
   return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
     css: DatePickerMonthsSwitch_ref,
+    className: classNames?.monthsSwitch?.wrapper,
     children: [(0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
         name: "carrot-left",
@@ -13207,6 +13219,7 @@ const DatePickerMonthsSwitch = () => {
         tooltip: "Previous month",
         color: isMinMonthReached ? theme.colors.grey : theme.colors.greyDarker
       }),
+      className: classNames?.monthsSwitch?.previousMonth,
       variant: 'tertiary',
       "aria-label": "Previous month",
       "data-testid": "previous-month",
@@ -13227,6 +13240,7 @@ const DatePickerMonthsSwitch = () => {
         tooltip: "Next month",
         color: isMaxMonthReached ? theme.colors.grey : theme.colors.greyDarker
       }),
+      className: classNames?.monthsSwitch?.nextMonth,
       variant: 'tertiary',
       onClick: handleNextMonth,
       isDisabled: isMaxMonthReached,
@@ -13261,7 +13275,8 @@ const DatePickerHeader = () => {
   const {
     calendarType,
     setCalendarType,
-    calendarViewDateTime
+    calendarViewDateTime,
+    classNames
   } = useDatePickerContext();
   const handleCalendarTypeChange = () => {
     if (calendarType === 'days') {
@@ -13272,6 +13287,7 @@ const DatePickerHeader = () => {
   };
   return (0,jsx_runtime_namespaceObject.jsxs)(PopoverHeading, {
     css: DatePickerHeader_ref,
+    className: classNames?.header,
     as: 'div',
     children: [(0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
@@ -13306,11 +13322,12 @@ const DatePickerCalendar = () => {
     years: YearsView
   };
   const {
-    calendarType
+    calendarType,
+    classNames
   } = useDatePickerContext();
   const Component = components[calendarType];
   return (0,jsx_runtime_namespaceObject.jsxs)(PopoverContent, {
-    className: "popover",
+    className: ['popover', classNames?.calendar].filter(Boolean).join(' '),
     css: /*#__PURE__*/(0,react_namespaceObject.css)({
       background: theme.colors.white,
       boxShadow: `-4px 4px 14px 0px ${theme.colors.greyDarker14}`,
@@ -13344,6 +13361,7 @@ const DatePickerTrigger = () => {
     format,
     name,
     label,
+    classNames,
     openCalendarMode,
     inputRef,
     inputProps,
@@ -13384,6 +13402,7 @@ const DatePickerTrigger = () => {
   return (0,jsx_runtime_namespaceObject.jsxs)((external_react_default()).Fragment, {
     children: [label && (0,jsx_runtime_namespaceObject.jsx)(Label_Label, {
       htmlFor: name,
+      className: classNames?.label,
       children: label
     }), (0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
       asChild: true,
@@ -13392,6 +13411,7 @@ const DatePickerTrigger = () => {
         placeholder: format,
         ref: inputRef,
         disabled: disabled,
+        className: classNames?.trigger?.input,
         register: register,
         inputProps: {
           onBlur: handleBlur,
@@ -13419,6 +13439,7 @@ const DatePickerTrigger = () => {
           variant: "tertiary",
           "aria-label": "Calendar",
           isDisabled: disabled,
+          className: classNames?.trigger?.calendarIcon,
           css: /*#__PURE__*/(0,react_namespaceObject.css)({
             padding: 0,
             cursor: openCalendarMode === 'input' || disabled ? 'default' : 'pointer',
@@ -16964,6 +16985,39 @@ const LinksTabBar = ({
 ;// ./src/components/Modal/index.ts
 
 
+;// ./src/components/NestedTable/NestedTableContext.tsx
+
+
+const NestedTableContext = /*#__PURE__*/(0,external_react_namespaceObject.createContext)({
+  collapsedIconName: 'carrot-up',
+  expandedIconName: 'carrot-down'
+});
+const NestedTableProvider = ({
+  children,
+  collapsedIconName = 'carrot-up',
+  expandedIconName = 'carrot-down'
+}) => (0,jsx_runtime_namespaceObject.jsx)(NestedTableContext.Provider, {
+  value: {
+    collapsedIconName,
+    expandedIconName
+  },
+  children: children
+});
+;// ./src/components/NestedTable/components/NestedTable.tsx
+
+
+
+const NestedTable = ({
+  children,
+  ...rest
+}) => {
+  return (0,jsx_runtime_namespaceObject.jsx)(NestedTableProvider, {
+    ...rest,
+    children: (0,jsx_runtime_namespaceObject.jsx)(Table_Table, {
+      children: children
+    })
+  });
+};
 ;// ./src/components/NestedTable/NestedTableRowContext.tsx
 
 
@@ -17000,7 +17054,7 @@ const NestedTableRowProvider = ({
     children: children
   });
 };
-;// ./src/components/NestedTable/useNestedTableRowContext.ts
+;// ./src/components/NestedTable/hooks/useNestedTableRowContext.ts
 
 
 const useNestedTableRowContext = () => (0,external_react_namespaceObject.useContext)(NestedTableRowContext);
@@ -17034,6 +17088,7 @@ const NestedTableCell = ({
     css: /*#__PURE__*/(0,react_namespaceObject.css)({
       borderRight: 'none',
       borderBottom: 'none',
+      background: 'transparent',
       ...notSubHeaderCSS
     },  true ? "" : 0,  true ? "" : 0),
     ...props,
@@ -17042,6 +17097,10 @@ const NestedTableCell = ({
     })
   });
 };
+;// ./src/components/NestedTable/hooks/useNestedTableContext.ts
+
+
+const useNestedTableContext = () => (0,external_react_namespaceObject.useContext)(NestedTableContext);
 ;// ./src/components/NestedTable/components/NestedTableCellSubHeader.tsx
 function NestedTableCellSubHeader_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)."; }
 
@@ -17060,6 +17119,10 @@ const NestedTableCellSubHeader = ({
   isHeader,
   ...props
 }) => {
+  const {
+    collapsedIconName = 'carrot-up',
+    expandedIconName = 'carrot-down'
+  } = useNestedTableContext();
   const {
     childRowsCount,
     isSubHeader: isSubHeaderGlobal,
@@ -17067,7 +17130,7 @@ const NestedTableCellSubHeader = ({
   } = useNestedTableRowContext();
   const isSubHeader = childRowsCount > 1 ? isSubHeaderGlobal : false;
   const content = isHeader ? '' : isSubHeader ? (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
-    name: isCollapsed ? 'carrot-up' : 'carrot-down',
+    name: isCollapsed ? collapsedIconName : expandedIconName,
     size: 18,
     css: NestedTableCellSubHeader_ref,
     tooltip: "",
@@ -17076,6 +17139,7 @@ const NestedTableCellSubHeader = ({
   }) : '';
   return (0,jsx_runtime_namespaceObject.jsx)(NestedTableCell, {
     css: NestedTableCellSubHeader_ref2,
+    as: isHeader ? 'th' : 'td',
     ...props,
     children: content
   });
@@ -17105,7 +17169,9 @@ const NestedTableRow = ({
   } = useNestedTableRowContext();
   const headerCSS = isSubHeader ? {
     background: theme.colors.greyLighter60
-  } : {};
+  } : {
+    background: theme.colors.white
+  };
   const classNames = [];
   if (isSubHeader) {
     classNames.push('first-row');
@@ -17114,9 +17180,11 @@ const NestedTableRow = ({
     classNames.push('collapsed');
   }
   const notSubHeaderCSS = !isSubHeader && isCollapsed ? {
+    height: 0,
     maxHeight: 0,
     padding: 0,
     '& td': {
+      height: 0,
       maxHeight: 0,
       padding: 0
     }
@@ -17144,6 +17212,7 @@ const NestedTableRow = ({
 
 
 
+
 ;// ./src/components/NestedTable/WithNestedTableRow.tsx
 
 
@@ -18461,7 +18530,7 @@ const TypeaheadOptionsBase = /*#__PURE__*/base_default()("ul",  true ? {
 }) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";overflow-y:auto;max-height:350px;" + ( true ? "" : 0));
 const TypeaheadOption = /*#__PURE__*/base_default()("li",  true ? {
   target: "e1vig1dw5"
-} : 0)("display:flex;align-items:center;padding:8px 16px;border:none;cursor:pointer;font-size:14px;gap:8px;padding:12px;height:40px;background:", ({
+} : 0)("display:flex;align-items:center;padding:0 16px;border:none;cursor:pointer;font-size:14px;gap:8px;padding:10px 12px;min-height:40px;line-height:20px;justify-content:space-between;overflow:hidden;text-overflow:ellipsis;background:", ({
   isActive,
   theme
 }) => isActive ? theme.colors.blueRoyal12 : 'none', ";&:hover{background:rgba(72, 125, 225, 0.06);}" + ( true ? "" : 0));
@@ -18484,16 +18553,16 @@ const TypeaheadItem = /*#__PURE__*/base_default()("div",  true ? {
 }) => theme.colors.grey, ";color:", ({
   theme,
   isDisabled
-}) => isDisabled ? theme.colors.grey : theme.colors.greyDarker, ";font-weight:500;font-size:14px;height:32px;align-items:center;padding:6px;user-select:none;" + ( true ? "" : 0));
+}) => isDisabled ? theme.colors.grey : theme.colors.greyDarker, ";font-weight:500;font-size:14px;min-height:20px;align-items:center;padding:6px;user-select:none;overflow:hidden;" + ( true ? "" : 0));
 const TypeaheadItemLabel = /*#__PURE__*/base_default()("div",  true ? {
   target: "e1vig1dw3"
 } : 0)("color:", ({
   theme,
   isDisabled
-}) => isDisabled ? theme.colors.grey : theme.colors.greyDarker, ";font-size:14px;font-weight:500;display:flex;gap:6px;align-items:center;cursor:default;" + ( true ? "" : 0));
+}) => isDisabled ? theme.colors.grey : theme.colors.greyDarker, ";font-size:14px;font-weight:500;display:block;gap:6px;align-items:center;cursor:default;overflow:hidden;text-overflow:ellipsis;" + ( true ? "" : 0));
 const TypeaheadItemCross = /*#__PURE__*/base_default()(Button_Button,  true ? {
   target: "e1vig1dw2"
-} : 0)("background:none;padding:0;padding-right:5;&:active,&:focus,&:hover{cursor:", ({
+} : 0)("background:none;padding:0;padding-right:5;height:auto;&:active,&:focus,&:hover{cursor:", ({
   isDisabled
 }) => isDisabled ? 'default' : 'pointer', ";background:none;box-shadow:none;}&:disabled{background:none;}" + ( true ? "" : 0));
 const TypeaheadInputsGroupWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
@@ -18869,19 +18938,35 @@ function TypeaheadOption_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tri
 
 
 
+
 var TypeaheadOption_ref =  true ? {
-  name: "1o3nkn",
-  styles: "margin-left:auto"
+  name: "1gz2b5f",
+  styles: "overflow:hidden;text-overflow:ellipsis"
+} : 0;
+var TypeaheadOption_ref2 =  true ? {
+  name: "1kqn2f4",
+  styles: "height:auto;padding:0"
+} : 0;
+var TypeaheadOption_ref3 =  true ? {
+  name: "abxjv3",
+  styles: "margin-left:auto;min-width:10px"
 } : 0;
 const TypeaheadOption_TypeaheadOption = ({
   children,
   ...rest
 }) => (0,jsx_runtime_namespaceObject.jsxs)(TypeaheadOption, {
   ...rest,
-  children: [children, ' ', rest.isActive && (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
-    name: "check",
-    size: 10,
-    css: TypeaheadOption_ref
+  children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
+    css: TypeaheadOption_ref,
+    children: [children, ' ']
+  }), rest.isActive && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+    variant: "tertiary",
+    css: TypeaheadOption_ref2,
+    startIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+      name: "check",
+      size: 10,
+      css: TypeaheadOption_ref3
+    })
   })]
 });
 ;// ./src/components/Typeahead/components/TypeaheadItem.ts
@@ -18897,8 +18982,8 @@ const TypeaheadItemImage = /*#__PURE__*/base_default()("img",  true ? {
 const TypeaheadItemIcon = /*#__PURE__*/base_default()(Icon_Icon,  true ? {
   target: "e1rxxx7l0"
 } : 0)( true ? {
-  name: "1hziu2d",
-  styles: "width:18px;height:18px;border-radius:50%"
+  name: "ebppw3",
+  styles: "width:18px;height:18px;border-radius:50%;margin-right:6px;vertical-align:middle"
 } : 0);
 ;// ./src/components/Typeahead/utils.tsx
 
@@ -20240,6 +20325,7 @@ const JsonSchemaForm_Form = /*#__PURE__*/base_default()(UnstyledForm,  true ? {
 
 
 
+
 
 
 ;// ./src/contexts/Translation/config.ts