@loadsmart/loadsmart-ui 5.13.1 → 5.14.0

package/dist/theming/theming.helpers.d.ts

@@ -18,4 +18,5 @@ export declare function generateBorderGetters({ radiuses, widths, }: {
     radiuses: VariableMap;
     widths: VariableMap;
 }): Record<string, (name: string) => VariableValue>;
+export declare function generateHeightGetter(heights: VariableMap): (name: string) => VariableValue;
 export {};

package/dist/tools/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-0f94ff83.js");require("../toArray-b56541b4.js"),require("../loadsmart.theme-63c13988.js"),require("../theming/index.js"),exports.conditional=e.conditional,exports.prop=e.prop,exports.whenProps=e.whenProps;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-73352de5.js");require("../toArray-b56541b4.js"),require("../miranda-compatibility.theme-bb0cbfb2.js"),require("@loadsmart/miranda-tokens"),require("../theming/index.js"),exports.conditional=e.conditional,exports.prop=e.prop,exports.whenProps=e.whenProps;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.13.1",
+  "version": "5.14.0",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [
@@ -78,6 +78,7 @@
     "@babel/preset-typescript": "7.13.0",
     "@commitlint/cli": "16.0.2",
     "@commitlint/config-conventional": "16.0.0",
+    "@loadsmart/miranda-tokens": "1.3.0",
     "@loadsmart/stylelint-config": "0.0.3",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "19.0.0",
@@ -172,11 +173,12 @@
     "typescript-plugin-styled-components": "1.5.0"
   },
   "peerDependencies": {
+    "@loadsmart/miranda-tokens": "1.3.0",
     "@testing-library/dom": ">=5.12.0",
     "@testing-library/react": ">=11.2.6",
     "prop-types": ">=15.7.2",
-    "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
+    "react": ">=16.8.0",
     "styled-components": ">=5.3.0"
   },
   "dependencies": {

package/src/addons/Theme/register.js

@@ -18,8 +18,9 @@ import loadsmart, {
   SHADOWS,
   SPACINGS,
 } from '../../theming/themes/loadsmart.theme'
+import miranda from '../../theming/themes/miranda-compatibility.theme'
 
-const THEMES = { alice, loadsmart }
+const THEMES = { alice, loadsmart, miranda }
 
 const TOKEN_PARAM_KEY = 'tokenPrefix'
 

package/src/components/Dropdown/DropdownMenu.tsx

@@ -26,7 +26,7 @@ import conditional, { whenProps } from 'tools/conditional'
 
 const Popover = styled(DefaultPopover)<{ $align: 'start' | 'end' }>`
   position: absolute;
-  top: calc(36px + ${token('space-xs')});
+  top: calc(${token('dropdown-trigger-height')} + ${token('space-xs')});
 
   ${conditional({
     'left: 0;': whenProps({ $align: 'start' }),

package/src/components/Dropdown/DropdownTrigger.tsx

@@ -37,7 +37,7 @@ type TriggerButtonProps = ButtonProps & {
 
 const dropdownExpandedStyle = css`
   &[aria-expanded='true'] {
-    color: ${token('color-accent')};
+    color: ${token('dropdown-trigger-expanded-color')};
   }
 `
 
@@ -120,8 +120,8 @@ const TriggerButton = styled(
 
           visibility: hidden;
 
-          /* @REVIEW: since this is a span descendant of a button 
-          I'm using the direct value of children the solution inside Link 
+          /* @REVIEW: since this is a span descendant of a button
+          I'm using the direct value of children the solution inside Link
           relies on data-text attribute */
 
           content: '${children}';
@@ -163,7 +163,9 @@ const DropdownTriggerWrapper = styled.div<DropdownTriggerWrapperProps>`
 
   color: ${token('color-neutral-darker')};
 
-  height: 36px;
+  height: ${token('dropdown-trigger-height')};
+  box-sizing: border-box;
+
   flex: 1;
 
   ${hoverable`

package/src/components/Select/SelectOption.tsx

@@ -22,17 +22,14 @@ const Group = styled(DefaultGroup).attrs({
 `
 
 const Icon = styled(DefaultIcon)`
-  color: ${token('color-accent')};
+  color: ${token('select-selected-option-check-color')};
 `
 
 const DefaultSelectOption = styled(Dropdown.Item)<DropdownMenuItemProps>`
   background: ${conditional({
-      'color-accent': whenProps({ 'aria-selected': true }),
-      'color-neutral-white': whenProps({ 'aria-selected': false }),
-    })}${conditional({
-      '33': whenProps({ 'aria-selected': true }),
-      ff: whenProps({ 'aria-selected': false }),
-    })};
+    'select-selected-option-background-color': whenProps({ 'aria-selected': true }),
+    'color-neutral-white': whenProps({ 'aria-selected': false }),
+  })};
 `
 
 function SelectOption({

package/src/components/Select/useSelect.helpers.test.ts

@@ -1,4 +1,4 @@
-import { getDisplayValue, getValue } from './useSelect.helpers'
+import { getDisplayValue, getValue, toSelection } from './useSelect.helpers'
 import generator from '../../tests/generator'
 
 import type { SelectAdapter, SelectValue, Option } from './Select.types'
@@ -60,6 +60,15 @@ describe('useSelect helpers', () => {
 
       expect(getDisplayValue(adapters, selection, multiple)).toEqual(adapter.getLabel(item))
     })
+
+    it('returns empty string as display value when selection label is undefined', () => {
+      const selection: SelectValue = new Map().set(undefined, {
+        label: undefined,
+        value: undefined,
+      })
+
+      expect(getDisplayValue(adapters, selection, multiple)).toEqual('')
+    })
   })
 
   describe('multiple selection', () => {
@@ -118,5 +127,58 @@ describe('useSelect helpers', () => {
 
       expect(getDisplayValue(adapters, selection, multiple)).toEqual('')
     })
+
+    it('returns empty string as display value when selection label is undefined', () => {
+      const selection: SelectValue = new Map().set(undefined, {
+        label: undefined,
+        value: undefined,
+      })
+
+      expect(getDisplayValue(adapters, selection, multiple)).toEqual('')
+    })
+  })
+
+  describe('getSelection', () => {
+    it('initializes correctly when a null value is provided', () => {
+      expect(toSelection(null)).toEqual([])
+    })
+
+    it('initializes correctly when an undefined value is provided', () => {
+      expect(toSelection(undefined)).toEqual([])
+    })
+
+    it('initializes correctly when a valid value is provided', () => {
+      expect(
+        toSelection({
+          value: 'some-value',
+          label: 'Some label',
+        } as Option)
+      ).toEqual([
+        {
+          value: 'some-value',
+          label: 'Some label',
+        },
+      ])
+
+      expect(
+        toSelection([
+          {
+            value: 'some-value-1',
+            label: 'Some label 1',
+          } as Option,
+        ])
+      ).toEqual([
+        {
+          value: 'some-value-1',
+          label: 'Some label 1',
+        },
+      ])
+    })
+
+    it('initializes correctly when an empty value is provided', () => {
+      expect(toSelection([])).toEqual([])
+      expect(toSelection({})).toEqual([])
+      expect(toSelection([{}])).toEqual([])
+    })
   })
 })

package/src/components/Select/useSelect.helpers.ts

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { GenericAdapter } from './Select.constants'
 import isEmpty from 'utils/toolset/isEmpty'
+import toArray from 'utils/toolset/toArray'
 
-import type { SelectAdapter, SelectValue, Option, Adapters } from './Select.types'
+import type { SelectAdapter, SelectValue, Option, Adapters, SelectProps } from './Select.types'
 
 export function getAdapter(adapters: Adapters, type?: string): SelectAdapter<any> {
   if (type == null) {
@@ -32,6 +33,12 @@ export function getValue(selection: SelectValue, multiple?: boolean): Option | O
   }
 }
 
+export function toSelection(value: SelectProps['value']): Option[] {
+  const safeValue = toArray(value || [])
+
+  return safeValue.filter((option) => !isEmpty(option))
+}
+
 export function getDisplayValue(
   adapters: Adapters,
   selection: SelectValue,
@@ -46,7 +53,7 @@ export function getDisplayValue(
   } else {
     const value = getValue(selection, multiple)
     const adapter = getAdapter(adapters, (value as Option)._type)
-    return adapter.getLabel(value)
+    return adapter.getLabel(value) ?? ''
   }
 }
 

package/src/components/Select/useSelect.test.ts

@@ -0,0 +1,207 @@
+import { renderHook } from '@testing-library/react-hooks'
+
+import useSelect from './useSelect'
+import type { SelectProps, Option } from './Select.types'
+
+describe('useSelect', () => {
+  describe('single selection', () => {
+    it('initializes correctly when no value is provided', () => {
+      const props: SelectProps = {
+        multiple: false,
+        name: 'anything',
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when a null value is provided', () => {
+      const props: SelectProps = {
+        multiple: false,
+        name: 'anything',
+        value: null,
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when an undefined value is provided', () => {
+      const props: SelectProps = {
+        multiple: false,
+        name: 'anything',
+        value: undefined,
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when a valid value is provided', () => {
+      const props: SelectProps = {
+        multiple: false,
+        name: 'anything',
+        value: {
+          value: 'some-value',
+          label: 'Some label',
+        } as Option,
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map().set('some-value', {
+        value: 'some-value',
+        label: 'Some label',
+      })
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('Some label')
+    })
+
+    it('initializes correctly when an invalid value is provided', () => {
+      const props: SelectProps = {
+        multiple: false,
+        name: 'anything',
+        value: {
+          label: undefined,
+          value: undefined,
+        } as Option,
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map().set(undefined, {
+        label: undefined,
+        value: undefined,
+      })
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when an empty value is provided', () => {
+      const props: SelectProps = {
+        multiple: false,
+        name: 'anything',
+        value: {},
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+  })
+
+  describe('multiple selection', () => {
+    it('initializes correctly when no value is provided', () => {
+      const props: SelectProps = {
+        multiple: true,
+        name: 'anything',
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when a null value is provided', () => {
+      const props: SelectProps = {
+        multiple: true,
+        name: 'anything',
+        value: null,
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when an undefined value is provided', () => {
+      const props: SelectProps = {
+        multiple: true,
+        name: 'anything',
+        value: undefined,
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when a valid value is provided', () => {
+      const props: SelectProps = {
+        multiple: true,
+        name: 'anything',
+        value: [
+          {
+            value: 'some-value',
+            label: 'Some label',
+          } as Option,
+        ],
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+
+      const expectedSelected = new Map().set('some-value', {
+        value: 'some-value',
+        label: 'Some label',
+      })
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when an invalid value is provided', () => {
+      const props: SelectProps = {
+        multiple: true,
+        name: 'anything',
+        value: [
+          {
+            label: undefined,
+            value: undefined,
+          } as Option,
+        ],
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map().set(undefined, {
+        label: undefined,
+        value: undefined,
+      })
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when an empty value is provided', () => {
+      const props: SelectProps = {
+        multiple: true,
+        name: 'anything',
+        value: [{}],
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+  })
+})

package/src/components/Select/useSelect.ts

@@ -13,7 +13,13 @@ import { isThenable } from 'utils/toolset/isThenable'
 import toArray from 'utils/toolset/toArray'
 import { GenericAdapter } from './Select.constants'
 import { useSelectable } from './Select.context'
-import { escapeRegExp, getAdapter, getDisplayValue, getValue } from './useSelect.helpers'
+import {
+  escapeRegExp,
+  getAdapter,
+  getDisplayValue,
+  getValue,
+  toSelection,
+} from './useSelect.helpers'
 
 import type { ChangeEvent, FocusEvent } from 'react'
 import type {
@@ -213,7 +219,7 @@ function useSelect(props: SelectProps): useSelectReturn {
   const adapters = useMemo<Adapters>(() => extractAdapters(datasources), [datasources])
 
   const selectable = useSelectable({
-    selected: toArray(props.value || []),
+    selected: toSelection(props.value),
     multiple,
     adapters,
     onChange: useCallback(

package/src/components/SideNavigation/Menu/Menu.tsx

@@ -15,9 +15,10 @@ const MenuTitle = styled.div`
   padding-left: ${token('space-l')};
 
   color: ${token('color-neutral')};
-  font-weight: ${token('font-weight-bold')};
-  font-size: ${token('font-size-5')};
-  line-height: ${token('font-height-3')};
+
+  font-weight: ${token('side-navigation-menu-title-font-weight')};
+  font-size: ${token('side-navigation-menu-title-font-size')};
+  line-height: ${token('side-navigation-menu-title-line-height')};
   text-transform: uppercase;
 `
 

package/src/components/SideNavigation/Menu/MenuBaseItem.tsx

@@ -35,7 +35,7 @@ const StyledMenuItem = styled.button`
   cursor: pointer;
 
   ${focusable`
-    color: ${token('color-primary')};
+    color: ${token('side-navigation-menu-item-color--focus')};
   `}
 `
 

package/src/components/SideNavigation/Menu/MenuLink.tsx

@@ -8,16 +8,15 @@ import MenuBaseItem from './MenuBaseItem'
 
 const StyledMenuItem = styled((props) => <MenuBaseItem as="a" {...props} />)`
   ${hoverable`
-    color: ${token('color-primary')};
+    color: ${token('side-navigation-menu-link-color--hover')};
   `}
 
   ${({ active }) =>
     active
       ? css`
-          color: ${token('color-primary')};
-
-          background-color: rgba(0, 0, 0, 0.2);
-          box-shadow: inset ${token('space-xs')} 0px ${token('color-primary')};
+          background-color: ${token('side-navigation-menu-link-background-color--active')};
+          box-shadow: inset ${token('space-xs')} 0
+            ${token('side-navigation-menu-link-box-shadow-color--active')};
         `
       : ''}
 `

package/src/components/SideNavigation/SideNavigation.stories.tsx

@@ -46,7 +46,7 @@ export function Playground(args: SideNavigationProps): JSX.Element {
         <SideNavigation.Menu.SubItem
           label="Trailing"
           trailing={
-            <Tag size="small" variant="accent">
+            <Tag size="small" variant="success">
               NEW
             </Tag>
           }

package/src/components/Steps/ProgressSteps/ProgressStep.tsx

@@ -31,8 +31,8 @@ const StepConnector = styled.span<{ complete: boolean }>`
   })};
 
   background: ${conditional({
-    'color-neutral': whenProps({ complete: false }),
-    'color-accent': whenProps({ complete: true }),
+    'steps-progress-step-background-color': whenProps({ complete: false }),
+    'steps-progress-step-background-color--complete': whenProps({ complete: true }),
   })};
 `
 
@@ -79,16 +79,18 @@ const StepIndicator = styled.span<{ current: boolean; complete: boolean }>`
   border-width: 2px;
   border-style: solid;
   border-color: ${conditional({
-    'color-accent': whenProps([
+    'steps-progress-step-background-color--complete': whenProps([
       { current: true, complete: [true, false] },
       { current: false, complete: true },
     ]),
-    'color-neutral': whenProps({ current: false, complete: false }),
+    'steps-progress-step-background-color': whenProps({ current: false, complete: false }),
   })};
   border-radius: ${token('border-radius-circle')};
 
   background: ${conditional({
-    'color-accent': whenProps([{ current: false, complete: true }]),
+    'steps-progress-step-background-color--complete': whenProps([
+      { current: false, complete: true },
+    ]),
     'color-neutral-white': whenProps([
       { current: true, complete: [true, false] },
       { current: false, complete: false },
@@ -96,9 +98,9 @@ const StepIndicator = styled.span<{ current: boolean; complete: boolean }>`
   })};
 
   color: ${conditional({
-    'color-neutral': whenProps({ current: false, complete: false }),
+    'steps-progress-step-background-color': whenProps({ current: false, complete: false }),
     'color-neutral-white': whenProps({ current: false, complete: true }),
-    'color-accent': whenProps({ current: true }),
+    'steps-progress-step-background-color--complete': whenProps({ current: true }),
   })};
 `