@loadsmart/loadsmart-ui 6.3.0 → 7.0.0

package/src/components/Table/Table.tsx

@@ -36,7 +36,6 @@ import type {
   TablePickerItemProps,
   TablePickerProps,
   ExpandableTableRowProps,
-  TableHeadCellProps,
 } from './Table.types'
 
 const StyledTableBody = styled.tbody`
@@ -83,7 +82,6 @@ const StyledTableCell = styled.td<{ alignment?: string; format?: string }>`
 const StyledTableHeadCell = styled.th<{
   alignment?: string
   clickable: boolean
-  capitalized?: boolean
 }>`
   ${StyledCell}
 
@@ -91,10 +89,7 @@ const StyledTableHeadCell = styled.th<{
 
   font-weight: ${token('font-weight-bold')};
 
-  text-transform: ${conditional({
-    uppercase: whenProps({ capitalized: false }),
-    capitalize: whenProps({ capitalized: true }),
-  })};
+  text-transform: capitalize;
 
   cursor: ${conditional({
     pointer: whenProps({ clickable: true }),
@@ -103,17 +98,6 @@ const StyledTableHeadCell = styled.th<{
 `
 
 const StyledTableHead = styled.thead`
-  box-shadow: 0 1px 0 ${token('color-neutral')};
-
-  ${StyledTableCell} {
-    padding: ${token('space-s')};
-
-    font-weight: ${token('font-weight-bold')};
-    text-transform: uppercase;
-  }
-`
-
-const StyledExpandableTableHead = styled.thead`
   border: 1px solid ${token('color-neutral-lighter')};
 
   ${StyledTableCell} {
@@ -124,43 +108,24 @@ const StyledExpandableTableHead = styled.thead`
   }
 `
 
-const BaseStyledTableRow = styled.tr`
+const StyledTableRow = styled.tr<{ selected: boolean; isExpanded: boolean }>`
   ${StyledTableHead} > & {
-    height: 36px;
-
-    background-color: ${token('color-neutral-white')};
+    background-color: ${token('color-neutral-lightest')};
   }
 
-  ${StyledTableBody} > & {
-    ${hoverable`
-    outline: 1px solid ${token('color-accent')};
-  `}
-
-    ${focusable`
-    box-shadow: inset ${token('shadow-glow-primary')};
-  `}
+  ${StyledTableFoot} > & {
+    background-color: ${token('color-neutral-lightest')};
   }
-`
 
-const StyledTableRow = styled(BaseStyledTableRow)<{ selected?: boolean }>`
   background-color: ${conditional({
     'table-row-selected-color': whenProps({ selected: true }),
-    'color-transparent': whenProps({ selected: false }),
+    'color-neutral-white': whenProps({ selected: false }),
   })};
-
-  ${StyledTableBody} > & {
-    &:nth-child(odd) ${StyledTableCell} {
-      background: ${token('table-row-variant-color')};
-    }
-
-    &:nth-child(even) ${StyledTableCell} {
-      background: ${token('color-transparent')};
-    }
-  }
-`
-
-const StyledExpandableTableRow = styled.tr<{ $isExpanded: boolean }>`
-  background-color: ${token('color-neutral-white')};
+  ${hoverable`
+    background-color: ${conditional({
+      'table-row-selected-color': whenProps({ selected: true }),
+    })} !important;
+  `}
 
   border-color: ${token('color-neutral-lighter')};
   border-width: 1px;
@@ -168,22 +133,24 @@ const StyledExpandableTableRow = styled.tr<{ $isExpanded: boolean }>`
   border-right-style: solid;
   border-left-style: solid;
   border-bottom-style: ${conditional({
-    solid: whenProps({ $isExpanded: false }),
-    hidden: whenProps({ $isExpanded: true }),
+    solid: whenProps({ isExpanded: false }),
+    hidden: whenProps({ isExpanded: true }),
   })};
 
   box-shadow: ${conditional({
-    '0px 3px 3px 0px #C1CED9': whenProps({ $isExpanded: true }),
-    none: whenProps({ $isExpanded: false }),
+    '0px 3px 3px 0px #C1CED9': whenProps({ isExpanded: true }),
+    none: whenProps({ isExpanded: false }),
   })};
 
-  ${hoverable`
-    background-color: ${token('color-neutral-lighter')};
-  `}
+  ${StyledTableBody} > & {
+    ${hoverable`
+      background-color: ${token('color-neutral-lighter')};
+    `}
 
-  ${focusable`
-    box-shadow: inset ${token('shadow-glow-primary')};
-  `}
+    ${focusable`
+      box-shadow: inset ${token('shadow-glow-primary')};
+    `}
+  }
 `
 
 const StyledExpandableContentRow = styled.tr`
@@ -195,20 +162,16 @@ const StyledExpandableContentRow = styled.tr`
   border-bottom-style: solid;
 `
 
-const StyledTable = styled.table<{ scale?: string; withExpandableRows?: boolean }>`
+const StyledTable = styled.table<{ scale?: string }>`
   width: 100%;
 
   white-space: nowrap;
 
-  background-color: ${conditional({
-    'color-neutral-lightest': whenProps({ withExpandableRows: true }),
-    'color-neutral-white': whenProps({ withExpandableRows: false }),
-  })};
+  background-color: ${token('color-neutral-lightest')};
 
   border-collapse: collapse;
 
-  ${StyledTableBody} ${StyledTableRow},
-  ${StyledTableBody} ${StyledExpandableTableRow} {
+  ${StyledTableBody} ${StyledTableRow} {
     height: ${conditional({
       '24px': whenProps({ scale: 'small' }),
       '48px': whenProps({ scale: 'default' }),
@@ -240,14 +203,13 @@ function Table<T>({
   children,
   selection,
   scale = 'default',
-  withExpandableRows,
   ...others
 }: TableProps<T>): JSX.Element {
   return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     <TableSelectionProvider selection={selection}>
-      <StyledTable scale={scale} withExpandableRows={withExpandableRows} {...others}>
+      <StyledTable scale={scale} {...others}>
         {children}
       </StyledTable>
     </TableSelectionProvider>
@@ -273,10 +235,6 @@ function TableHead({ children, ...others }: TableSectionProps): JSX.Element {
   return <StyledTableHead {...others}>{children}</StyledTableHead>
 }
 
-function ExpandableTableHead({ children, ...others }: TableSectionProps): JSX.Element {
-  return <StyledExpandableTableHead {...others}>{children}</StyledExpandableTableHead>
-}
-
 function TableBody({ children, ...others }: TableSectionProps): JSX.Element {
   return <StyledTableBody {...others}>{children}</StyledTableBody>
 }
@@ -344,19 +302,11 @@ function SelectionHeadCell<T>(props: SelectionCellProps<T>): JSX.Element {
   )
 }
 
-function ExpandableHeadCell(props: TableHeadCellProps): JSX.Element {
-  return <TableHeadCell capitalized {...props} />
-}
-
-function ExpandableCell(props: TableCellProps): JSX.Element {
-  return <TableCell {...props} />
-}
-
 function TableRow({ children, ...others }: TableRowProps): JSX.Element {
   const selected = useIsRowSelected(children)
 
   return (
-    <StyledTableRow {...others} selected={selected}>
+    <StyledTableRow {...others} selected={selected} isExpanded={false}>
       {children}
     </StyledTableRow>
   )
@@ -373,6 +323,8 @@ function ExpandableTableRow({
 }: ExpandableTableRowProps): JSX.Element {
   const [openState, setOpenState] = useState(initialExpanded)
 
+  const selected = useIsRowSelected(children)
+
   const open = expanded ?? openState
   const isExpanded = Boolean(open && expandableContent)
   const colSpan = Array.isArray(children) ? children.length + 1 : 1
@@ -391,10 +343,10 @@ function ExpandableTableRow({
 
   return (
     <>
-      <StyledExpandableTableRow {...others} onClick={toggle} $isExpanded={isExpanded}>
-        <ExpandableCell>{expandableContent && leading}</ExpandableCell>
+      <StyledTableRow {...others} onClick={toggle} isExpanded={isExpanded} selected={selected}>
+        <TableCell>{expandableContent && leading}</TableCell>
         {children}
-      </StyledExpandableTableRow>
+      </StyledTableRow>
       {isExpanded && (
         <StyledExpandableContentRow>
           <StyledTableCell colSpan={colSpan}>{expandableContent}</StyledTableCell>
@@ -408,15 +360,13 @@ function TableHeadCell({
   alignment = 'left',
   children,
   onClick,
-  capitalized = false,
   ...others
-}: TableHeadCellProps): JSX.Element {
+}: TableCellProps): JSX.Element {
   return (
     <StyledTableHeadCell
       clickable={onClick != null}
       alignment={alignment}
       onClick={onClick}
-      capitalized={capitalized}
       {...others}
     >
       <Layout.Group space="xs" align="center">
@@ -563,12 +513,7 @@ Table.Selection = {
   Cell: SelectionCell,
   HeadCell: SelectionHeadCell,
 }
-Table.Expandable = {
-  Head: ExpandableTableHead,
-  HeadCell: ExpandableHeadCell,
-  Cell: ExpandableCell,
-  Row: ExpandableTableRow,
-}
+Table.ExpandableRow = ExpandableTableRow
 Table.SortHandle = TableSortHandle
 TablePicker.Item = TablePickerItem
 Table.Picker = TablePicker

package/src/components/Table/Table.types.ts

@@ -17,7 +17,6 @@ export interface TableProps<T extends Selectable = TableSelectableRow>
   extends HTMLAttributes<HTMLTableElement> {
   scale?: Scale
   selection?: TableSelectionConfig<T>
-  withExpandableRows?: boolean
 }
 
 export interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
@@ -57,10 +56,6 @@ export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
   selected?: boolean
 }
 
-export interface TableHeadCellProps extends TableCellProps {
-  capitalized?: boolean
-}
-
 export type TableColumn<T = Record<string, unknown>> = {
   /**
    * The accessor of you entry interface

package/src/testing/SelectEvent/SelectEvent.test.tsx

@@ -119,6 +119,21 @@ describe('SelectEvent', () => {
       await shouldHaveSelectedOption(input, option)
     })
 
+    it('selects the option when a RegExp is provided', async () => {
+      const props = {
+        onChange: jest.fn(),
+      }
+      setup(props)
+      const option = generator.pick(OPTIONS) as GenericOption
+      const optionRegexp = new RegExp(option.label, 'i')
+
+      const input = screen.getByLabelText('Select something')
+      await selectEvent.select(optionRegexp, input)
+
+      shouldHaveDisplayValue(input, option.label)
+      await shouldHaveSelectedOption(input, option)
+    })
+
     it('unselects the clicked item', async () => {
       setup({})
 

package/src/testing/SelectEvent/SelectEvent.ts

@@ -116,11 +116,11 @@ async function collapse(input: HTMLElement): Promise<void> {
 /**
  * Select the provided option(s), if they are present in the menu.
  * Notice that we programatically expand the `Select` menu before select the item
- * @param {string} option - Label for the option to be selected.
+ * @param {string | RegExp} option - Label for the option to be selected.
  * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.
  * @returns {Promise<void>}
  */
-async function select(option: string, input: HTMLElement): Promise<void> {
+async function select(option: string | RegExp, input: HTMLElement): Promise<void> {
   await expand(input)
 
   const menuContainer = getSelectMenu(input)

package/src/theming/themes/miranda-compatibility.theme.ts

@@ -872,7 +872,7 @@ const mirandaCompatibility = {
   // Table
   'table-row-default-color': color('neutral-white'),
   'table-row-variant-color': toCSSValue('color-neutral-40', 0.2),
-  'table-row-selected-color': toCSSValue('color-primary-60', 0.2),
+  'table-row-selected-color': toCSSValue('color-primary-20'),
 
   // Top Navigation
   'top-navigation-height': rem('60px'),

package/dist/prop-201ffe28.js

@@ -1,2 +0,0 @@
-"use strict";var t=require("./toArray-b56541b4.js"),n=require("./miranda-compatibility.theme-22a9ce26.js"),e=require("./theming/index.js");function r(t,r){return Object.keys(t||{}).reduce(((o,i)=>{var u;let s=t[i];if(n.isFunction(s)&&(s=s(r)),s){const t=i,n=null!==(u=e.getToken(t,r))&&void 0!==u?u:i;return[...o,n]}return o}),[]).join(" ")}function o(...t){const[n,e]=t;return null==n||!1===n||Number.isNaN(n)?e||n:"string"==typeof n&&0===n.length&&e||n}exports.conditional=function(...e){return function(o){let i=[];for(let u=0;u<e.length;u++){const s=e[u];n.isFunction(s)?i.push(s(o)):t.isObject(s)?i=i.concat(r(s,o)):s&&i.push(String(s))}return i.join(" ")}},exports.prop=function(t,n,e=o){return r=>e(r[t],n)},exports.whenProps=function(e){return function(r){const o=t.toArray(e);let i=!1;for(let e=0;e<o.length;e++){const u=o[e],s=Object.keys(u);let c=!0;for(let e=0;e<s.length&&c;e++){const o=s[e],i=n.lodash_get(r,o),l=u[o];c=Array.isArray(l)?c&&t.toArray(l).includes(i):n.isFunction(l)?c&&Boolean(l(i)):c&&l===i}i=i||c}return i}};
-//# sourceMappingURL=prop-201ffe28.js.map