@antscorp/antsomi-ui 2.0.101 → 2.0.102

package/es/components/organism/DataTable/components/Table/styled.js

@@ -4,139 +4,139 @@ import styled from 'styled-components';
 import { Table } from '@antscorp/antsomi-ui/es/components/organism/Table';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { blue1, gray5 } = globalToken || {};
-export const StyledTable = styled(Table) `
-  &.antsomi-table-wrapper {
-    max-height: 100%;
-    overflow: auto;
-
-    .antsomi-table-header {
-      flex-shrink: 0;
-
-      th.antsomi-table-cell:nth-last-child(2) {
-        border-inline-end: 0px !important;
-      }
-    }
-
-    .antsomi-spin-nested-loading {
-      height: 100%;
-
-      .antsomi-spin-container {
-        height: 100%;
-      }
-    }
-
-    .antsomi-table {
-      height: 100%;
-      &.antsomi-table-bordered > .antsomi-table-container {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        border-inline-start: 0px;
-
-        /* Remove border endline for last column */
-        > .antsomi-table-content {
-          > table {
-            > thead > tr > th:last-child,
-            > tbody > tr > td:last-child {
-              border-inline-end: 0px;
-            }
-          }
-        }
-      }
-
-      .antsomi-table-cell.antsomi-table-cell-scrollbar {
-        border-inline-end: 0px !important;
-      }
-
-      .antsomi-table-cell:last-child {
-        border-inline-end: 0px !important;
-      }
-
-      .antsomi-table-body {
-        &::-webkit-scrollbar-thumb {
-          background: transparent;
-        }
-
-        &:hover {
-          &::-webkit-scrollbar-thumb {
-            background: ${gray5};
-          }
-        }
-      }
-    }
-
-    .antsomi-table-row {
-      .antsomi-table-cell[aria-resizable='true'] {
-        border-inline-end: 2px solid ${blue1} !important;
-      }
-
-      .antsomi-table-cell {
-        overflow: hidden;
-      }
-    }
-
-    .antsomi-table-expanded-row-fixed {
-      padding: 15px;
-
-      &::after {
-        display: none;
-      }
-    }
-
-    .antsomi-table-container {
-      &::after {
-        box-shadow: none !important;
-      }
-    }
-
-    .antsomi-table-cell-fix-left {
-      &::after {
-        box-shadow: none !important;
-      }
-    }
-  }
-
-  thead.antsomi-table-thead {
-    position: relative;
-    z-index: 20;
-  }
-
-  /* Style handle resize */
-  .resizable-handle-wrapper {
-    position: absolute;
-    top: 0px;
-    right: -10px;
-    width: 20px;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    z-index: 10;
-    cursor: col-resize;
-
-    .resizable-handle {
-      width: 2px;
-      background-color: ${blue1};
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-
-      &::after {
-        content: '';
-        position: absolute;
-        height: 8px;
-        width: 8px;
-        top: 16px;
-        border-radius: 100%;
-        box-sizing: border-box;
-        background-color: #fff;
-        border: 1px solid ${blue1};
-      }
-    }
-
-    &:hover .resizable-handle {
-      opacity: 1;
-    }
-  }
+export const StyledTable = styled(Table) `
+  &.antsomi-table-wrapper {
+    max-height: 100%;
+    overflow: auto;
+
+    .antsomi-table-header {
+      flex-shrink: 0;
+
+      th.antsomi-table-cell:nth-last-child(2) {
+        border-inline-end: 0px !important;
+      }
+    }
+
+    .antsomi-spin-nested-loading {
+      height: 100%;
+
+      .antsomi-spin-container {
+        height: 100%;
+      }
+    }
+
+    .antsomi-table {
+      height: 100%;
+      &.antsomi-table-bordered > .antsomi-table-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        border-inline-start: 0px;
+
+        /* Remove border endline for last column */
+        > .antsomi-table-content {
+          > table {
+            > thead > tr > th:last-child,
+            > tbody > tr > td:last-child {
+              border-inline-end: 0px;
+            }
+          }
+        }
+      }
+
+      .antsomi-table-cell.antsomi-table-cell-scrollbar {
+        border-inline-end: 0px !important;
+      }
+
+      .antsomi-table-cell:last-child {
+        border-inline-end: 0px !important;
+      }
+
+      .antsomi-table-body {
+        &::-webkit-scrollbar-thumb {
+          background: transparent;
+        }
+
+        &:hover {
+          &::-webkit-scrollbar-thumb {
+            background: ${gray5};
+          }
+        }
+      }
+    }
+
+    .antsomi-table-row {
+      .antsomi-table-cell[aria-resizable='true'] {
+        border-inline-end: 2px solid ${blue1} !important;
+      }
+
+      .antsomi-table-cell {
+        overflow: hidden;
+      }
+    }
+
+    .antsomi-table-expanded-row-fixed {
+      padding: 15px;
+
+      &::after {
+        display: none;
+      }
+    }
+
+    .antsomi-table-container {
+      &::after {
+        box-shadow: none !important;
+      }
+    }
+
+    .antsomi-table-cell-fix-left {
+      &::after {
+        box-shadow: none !important;
+      }
+    }
+  }
+
+  thead.antsomi-table-thead {
+    position: relative;
+    z-index: 20;
+  }
+
+  /* Style handle resize */
+  .resizable-handle-wrapper {
+    position: absolute;
+    top: 0px;
+    right: -10px;
+    width: 20px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    z-index: 10;
+    cursor: col-resize;
+
+    .resizable-handle {
+      width: 2px;
+      background-color: ${blue1};
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+
+      &::after {
+        content: '';
+        position: absolute;
+        height: 8px;
+        width: 8px;
+        top: 16px;
+        border-radius: 100%;
+        box-sizing: border-box;
+        background-color: #fff;
+        border: 1px solid ${blue1};
+      }
+    }
+
+    &:hover .resizable-handle {
+      opacity: 1;
+    }
+  }
 `;

package/es/components/organism/DataTable/components/Toolbar/SearchPopover.js

@@ -20,23 +20,23 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 const { Text } = Typography;
 const { t } = i18nInstance;
 // Styled
-const StyledContent = styled.div `
-  padding-top: 8px;
-
-  .or-go-to {
-    display: flex;
-    align-items: center;
-    height: 20px;
-    padding: 0 10px;
-  }
-
-  .antsomi-menu-item .antsomi-typography {
-    font-weight: 500;
-
-    &.text-link {
-      color: ${globalToken?.colorPrimary};
-    }
-  }
+const StyledContent = styled.div `
+  padding-top: 8px;
+
+  .or-go-to {
+    display: flex;
+    align-items: center;
+    height: 20px;
+    padding: 0 10px;
+  }
+
+  .antsomi-menu-item .antsomi-typography {
+    font-weight: 500;
+
+    &.text-link {
+      color: ${globalToken?.colorPrimary};
+    }
+  }
 `;
 export const SearchPopover = props => {
     const { children, objectName, searchList, isClientSearch, loading, isAddFilterFromSearchItem, searchItemProps, onAddFilter = () => { }, onSearch = () => { }, onClick = () => { }, onClickSearchItem, itemSearchRender, ...restProps } = props;

package/es/components/organism/DataTable/components/Toolbar/styled.js

@@ -6,83 +6,83 @@ import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 import { dataTableGlobalToken } from '../../providers';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { toolbarHeight, toolbarPadding } = dataTableGlobalToken || {};
-export const ToolbarWrapper = styled(Flex) `
-  min-height: ${toolbarHeight}px;
-  padding: ${toolbarPadding};
-
-  ${p => css `
+export const ToolbarWrapper = styled(Flex) `
+  min-height: ${toolbarHeight}px;
+  padding: ${toolbarPadding};
+
+  ${p => css `
     background-color: ${p.$isFilterActive
     ? dataTableGlobalToken?.filterToolbarColor
-    : globalToken?.bw0};
-  `}
+    : globalToken?.bw0};
+  `}
 `;
-export const CollapseButton = styled.div `
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin: 0px 3px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${globalToken?.bw8};
-  transition: all 0.2s ease;
-
-  ${props => css `
-    transform: rotate(${props.$collapsed ? 0 : -180}deg);
-  `}
+export const CollapseButton = styled.div `
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  margin: 0px 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${globalToken?.bw8};
+  transition: all 0.2s ease;
+
+  ${props => css `
+    transform: rotate(${props.$collapsed ? 0 : -180}deg);
+  `}
 `;
 export const ToolbarActionButtonWrapper = styled(Flex) ``;
-export const FilterSection = styled(Flex) `
-  height: 30px;
-  padding: 0 10px;
-  cursor: pointer;
+export const FilterSection = styled(Flex) `
+  height: 30px;
+  padding: 0 10px;
+  cursor: pointer;
 `;
-export const RowSelectedControlWrapper = styled(Flex) `
-  flex-shrink: 0;
-  height: ${toolbarHeight}px;
-  background-color: ${globalToken?.colorPrimary};
-  color: ${globalToken?.bw0};
-
-  .selected-count-label {
-    height: 100%;
-    padding: 0 17px;
-    font-weight: 700;
-    border-right: 1px solid ${globalToken?.bw0};
-  }
-
-  .action-buttons {
-    height: 30px;
-    margin-left: 6px;
-
-    .action-button {
-      padding: 0 10px;
-      color: ${globalToken?.bw0};
-      font-weight: 700;
-      text-transform: uppercase;
-      cursor: pointer;
-    }
-  }
+export const RowSelectedControlWrapper = styled(Flex) `
+  flex-shrink: 0;
+  height: ${toolbarHeight}px;
+  background-color: ${globalToken?.colorPrimary};
+  color: ${globalToken?.bw0};
+
+  .selected-count-label {
+    height: 100%;
+    padding: 0 17px;
+    font-weight: 700;
+    border-right: 1px solid ${globalToken?.bw0};
+  }
+
+  .action-buttons {
+    height: 30px;
+    margin-left: 6px;
+
+    .action-button {
+      padding: 0 10px;
+      color: ${globalToken?.bw0};
+      font-weight: 700;
+      text-transform: uppercase;
+      cursor: pointer;
+    }
+  }
 `;
-export const IconWrapper = styled.div `
-  flex-shrink: 0;
+export const IconWrapper = styled.div `
+  flex-shrink: 0;
 `;
 /** Search Popover */
-export const StyledSearchItem = styled(Flex) `
-  height: ${globalToken?.controlHeight}px;
-  padding-inline: 10px;
-  margin-block: 6px;
-  font-weight: 500;
-  cursor: pointer;
-
-  .text-link {
-    color: ${globalToken?.colorPrimary};
-  }
-
-  &:hover {
-    background-color: ${globalToken?.blue};
-  }
-
-  &:active {
-    background-color: ${globalToken?.blue1_1};
-  }
+export const StyledSearchItem = styled(Flex) `
+  height: ${globalToken?.controlHeight}px;
+  padding-inline: 10px;
+  margin-block: 6px;
+  font-weight: 500;
+  cursor: pointer;
+
+  .text-link {
+    color: ${globalToken?.colorPrimary};
+  }
+
+  &:hover {
+    background-color: ${globalToken?.blue};
+  }
+
+  &:active {
+    background-color: ${globalToken?.blue1_1};
+  }
 `;

package/es/components/organism/DataTable/styled/index.js

@@ -4,96 +4,96 @@ import styled from 'styled-components';
 import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const DataTableWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  height: 100%;
+export const DataTableWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  height: 100%;
 `;
-export const IconButton = styled.div `
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 200ms;
-  flex-shrink: 0;
-
-  i {
-    font-size: 14px;
-    color: ${globalToken?.bw8};
-  }
-
-  &:hover {
-    i {
-      color: ${globalToken?.bw10};
-    }
-  }
+export const IconButton = styled.div `
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 200ms;
+  flex-shrink: 0;
+
+  i {
+    font-size: 14px;
+    color: ${globalToken?.bw8};
+  }
+
+  &:hover {
+    i {
+      color: ${globalToken?.bw10};
+    }
+  }
 `;
-export const ActionButton = styled(Button) `
-  display: flex !important;
-  flex-direction: column;
-  align-items: center;
-  height: 43px !important;
-  width: 50px !important;
-  gap: 4px !important;
-  padding: 3px 0px !important;
-  font-size: 8px !important;
-  line-height: 1 !important;
-  color: ${globalToken?.bw8} !important;
-
-  ${props => props.$hide && `visibility: hidden !important;`}
-
-  .action-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    > i {
-      font-size: 24px !important;
-    }
-  }
-
-  /* &:hover, */
-  &:active {
-    color: ${globalToken?.colorPrimary} !important;
-  }
-
-  &:disabled {
-    background-color: ${globalToken?.bw2} !important;
-  }
+export const ActionButton = styled(Button) `
+  display: flex !important;
+  flex-direction: column;
+  align-items: center;
+  height: 43px !important;
+  width: 50px !important;
+  gap: 4px !important;
+  padding: 3px 0px !important;
+  font-size: 8px !important;
+  line-height: 1 !important;
+  color: ${globalToken?.bw8} !important;
+
+  ${props => props.$hide && `visibility: hidden !important;`}
+
+  .action-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    > i {
+      font-size: 24px !important;
+    }
+  }
+
+  /* &:hover, */
+  &:active {
+    color: ${globalToken?.colorPrimary} !important;
+  }
+
+  &:disabled {
+    background-color: ${globalToken?.bw2} !important;
+  }
 `;
-export const FilterMetricLabel = styled(Flex) `
-  width: 100%;
-
-  i[class*='ants-icon-ants-expand-more'] {
-    transform: rotate(-90deg);
-    color: ${globalToken?.bw8};
-  }
+export const FilterMetricLabel = styled(Flex) `
+  width: 100%;
+
+  i[class*='ants-icon-ants-expand-more'] {
+    transform: rotate(-90deg);
+    color: ${globalToken?.bw8};
+  }
 `;
-export const DataTableContent = styled.div `
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-
-  .scrollbar-view {
-    height: 100%;
-    position: relative !important;
-  }
+export const DataTableContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  .scrollbar-view {
+    height: 100%;
+    position: relative !important;
+  }
 `;
 /* Filter */
-export const FilterButton = styled.div `
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+export const FilterButton = styled.div `
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 `;
 /* Group by */
-export const GroupByExpandButton = styled(Flex) `
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
+export const GroupByExpandButton = styled(Flex) `
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 `;