@loadsmart/loadsmart-ui 5.19.1 → 5.20.0

package/dist/theming/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../miranda-compatibility.theme-4cecc6cf.js");require("@loadsmart/miranda-tokens");var t=Object.freeze({__proto__:null,Alice:e.alice,Loadsmart:e.loadsmart,Miranda:e.mirandaCompatibility});function r(t,r){const i=e.isFunction(t)?t(r):t;return r.theme[i]}exports.Themes=t,exports.getToken=function(e,t){return void 0===t?t=>r(e,t):r(e,t)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../miranda-compatibility.theme-f37aba71.js");require("@loadsmart/miranda-tokens");var t=Object.freeze({__proto__:null,Alice:e.alice,Loadsmart:e.loadsmart,Miranda:e.mirandaCompatibility});function r(t,r){const a=e.isFunction(t)?t(r):t;return r.theme[a]}exports.Themes=t,exports.getToken=function(e,t){return void 0===t?t=>r(e,t):r(e,t)};
 //# sourceMappingURL=index.js.map

package/dist/theming/themes/alice.theme.d.ts

@@ -584,6 +584,10 @@ declare const alice: {
     'card-title-font-height': string | number;
     'card-title-font-size': string | number;
     'card-title-font-weight': string | number;
+    'dropdown-background': string | number;
+    'dropdown-border-color': string | number;
+    'dropdown-border-radius': string | number;
+    'dropdown-shadow': string | number;
     'popover-background': string | number;
     'popover-border-color': string | number;
     'popover-border-radius': string | number;

package/dist/theming/themes/loadsmart.theme.d.ts

@@ -566,6 +566,10 @@ declare const loadsmart: {
     'card-title-font-height': string | number;
     'card-title-font-size': string | number;
     'card-title-font-weight': string | number;
+    'dropdown-background': string | number;
+    'dropdown-border-color': string | number;
+    'dropdown-border-radius': string | number;
+    'dropdown-shadow': string | number;
     'popover-background': string | number;
     'popover-border-color': string | number;
     'popover-border-radius': string | number;

package/dist/theming/themes/miranda-compatibility.theme.d.ts

@@ -739,6 +739,10 @@ declare const mirandaCompatibility: {
     'border-radius-m': string;
     'border-radius-l': string;
     'border-radius-circle': string;
+    'dropdown-background': string | number;
+    'dropdown-border-color': string | number;
+    'dropdown-border-radius': string | number;
+    'dropdown-shadow': string | number;
     left: string;
     center: string;
     right: string;

package/dist/tools/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-a330029f.js");require("../toArray-b56541b4.js"),require("../miranda-compatibility.theme-4cecc6cf.js"),require("@loadsmart/miranda-tokens"),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-ee1dfc7f.js");require("../toArray-b56541b4.js"),require("../miranda-compatibility.theme-f37aba71.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.19.1",
+	"version": "5.20.0",
 	"description": "Miranda UI, a React UI library",
 	"main": "dist",
 	"files": [
@@ -44,7 +44,7 @@
 		"@babel/preset-typescript": "^7.18.6",
 		"@commitlint/cli": "16.0.2",
 		"@commitlint/config-conventional": "16.0.0",
-		"@loadsmart/miranda-tokens": "1.3.0",
+		"@loadsmart/miranda-tokens": "^2.2.1",
 		"@loadsmart/stylelint-config": "0.0.3",
 		"@rollup/plugin-babel": "5.3.0",
 		"@rollup/plugin-commonjs": "19.0.0",
@@ -120,7 +120,6 @@
 		"postcss": "^7.0.39",
 		"postcss-cli": "^7.1.2",
 		"prettier": "2.2.1",
-		"prop-types": "15.7.2",
 		"react": "17.0.2",
 		"react-dom": "17.0.2",
 		"react-is": "17.0.2",
@@ -150,15 +149,15 @@
 		"webpack": "^5.75.0"
 	},
 	"peerDependencies": {
-		"@loadsmart/miranda-tokens": "1.3.0",
+		"@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",
 		"styled-components": ">=5.3.0"
 	},
 	"dependencies": {
+		"@floating-ui/react-dom": "^1.3.0",
 		"@loadsmart/utils-function": "0.3.1",
 		"@loadsmart/utils-object": "0.3.1",
 		"@loadsmart/utils-string": "0.3.1",

package/src/components/DatePicker/DatePicker.tsx

@@ -9,6 +9,7 @@ import { Icon } from 'components/Icon'
 import { TextField as DefaultTextField } from 'components/TextField'
 import CloseButton from 'common/CloseButton'
 import useDatePicker from './useDatePicker'
+import { Popover } from 'components/Popover'
 
 import type { CalendarDate } from 'components/Calendar'
 import type { ChangeEvent } from 'react'
@@ -91,6 +92,7 @@ function DatePicker(props: DatePickerProps): JSX.Element {
     constraints,
     getInputProps,
     getCalendarProps,
+    placement,
   } = props
 
   const datePicker = useDatePicker({
@@ -122,10 +124,12 @@ function DatePicker(props: DatePickerProps): JSX.Element {
   }
 
   return (
-    <GenericDropdown {...datePicker.getDropdownProps()}>
-      <Group space="s">
-        <DateInput trailing={renderTrailing()} {...datePicker.getInputProps()} />
-      </Group>
+    <GenericDropdown {...placement} {...datePicker.getDropdownProps()}>
+      <Popover.Reference>
+        <Group space="s">
+          <DateInput trailing={renderTrailing()} {...datePicker.getInputProps()} />
+        </Group>
+      </Popover.Reference>
       <DropdownMenu>
         <GenericCalendar {...datePicker.getCalendarProps()} />
       </DropdownMenu>

package/src/components/DatePicker/DatePicker.types.ts

@@ -2,6 +2,7 @@ import type { CalendarProps, GenericCalendarProps, useCalendarProps } from 'comp
 
 import type { TextFieldProps } from 'components/TextField'
 import type EventLike from 'utils/types/EventLike'
+import type { PopoverPlacement } from 'components/Popover'
 
 export interface DatePickerProps {
   id?: string
@@ -12,6 +13,7 @@ export interface DatePickerProps {
   onChange?: (event: EventLike<string | null>) => void
   getInputProps?: () => Partial<TextFieldProps>
   getCalendarProps?: () => Partial<GenericCalendarProps>
+  placement?: PopoverPlacement
 }
 
 export interface DateRangePickerProps {
@@ -24,4 +26,5 @@ export interface DateRangePickerProps {
   getRangeStartInputProps?: () => Partial<TextFieldProps>
   getRangeEndInputProps?: () => Partial<TextFieldProps>
   getCalendarProps?: () => Partial<GenericCalendarProps>
+  placement?: PopoverPlacement
 }

package/src/components/DatePicker/DateRangePicker.tsx

@@ -7,6 +7,7 @@ import { DateFormatHelper, GenericCalendar } from 'components/Calendar'
 import { Dropdown, GenericDropdown } from 'components/Dropdown'
 import { getToken as token } from 'theming'
 import { Group } from 'components/Layout'
+import { Popover } from 'components/Popover'
 import useDateRangePicker from './useDateRangePicker'
 
 import type { DateRangePickerProps } from './DatePicker.types'
@@ -37,6 +38,7 @@ function DateRangePicker(props: DateRangePickerProps): JSX.Element {
     getRangeStartInputProps,
     getRangeEndInputProps,
     getCalendarProps,
+    placement,
   } = props
 
   const dateRangePicker = useDateRangePicker({
@@ -84,18 +86,20 @@ function DateRangePicker(props: DateRangePickerProps): JSX.Element {
   }
 
   return (
-    <GenericDropdown {...dateRangePicker.getDropdownProps()}>
-      <Group space="s">
-        <DateInput
-          {...dateRangePicker.getRangeStartInputProps()}
-          data-testid="input-date-range-start"
-        />
-        <DateInput
-          trailing={renderRangeEndTrailing()}
-          {...dateRangePicker.getRangeEndInputProps()}
-          data-testid="input-date-range-end"
-        />
-      </Group>
+    <GenericDropdown {...placement} {...dateRangePicker.getDropdownProps()}>
+      <Popover.Reference>
+        <Group space="s">
+          <DateInput
+            {...dateRangePicker.getRangeStartInputProps()}
+            data-testid="input-date-range-start"
+          />
+          <DateInput
+            trailing={renderRangeEndTrailing()}
+            {...dateRangePicker.getRangeEndInputProps()}
+            data-testid="input-date-range-end"
+          />
+        </Group>
+      </Popover.Reference>
       <DropdownMenu footer={renderDropdownFooter()}>
         <GenericCalendar {...dateRangePicker.getCalendarProps()} />
       </DropdownMenu>

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -9,17 +9,12 @@ import Dropdown from './Dropdown'
 import DropdownContext from './Dropdown.context'
 
 import type { DropdownProps, DropdownMenuProps, DropdownTriggerProps } from './Dropdown.types'
+import { Popover } from 'components/Popover'
 
 export default {
   title: 'Components/Dropdown',
   component: Dropdown,
   argTypes: {
-    align: {
-      control: {
-        type: 'select',
-        options: ['start', 'end'],
-      },
-    },
     onBlur: {
       table: {
         disable: true,
@@ -40,7 +35,7 @@ export const Playground: Story<DropdownStoryProps> = (args) => {
     <div className="flex flex-col">
       <Dropdown {...args}>
         <Dropdown.Trigger outlined={args.outlined}>Actions</Dropdown.Trigger>
-        <Dropdown.Menu align={args.align}>
+        <Dropdown.Menu>
           {ACTIONS.map(({ label, value }) => (
             <Dropdown.Item
               key={value}
@@ -157,23 +152,25 @@ function ActionTrigger() {
   const { toggle, disabled } = React.useContext(DropdownContext)
 
   return (
-    <IconButton
-      disabled={disabled}
-      onClick={() => {
-        toggle()
-      }}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        height="24px"
-        viewBox="0 0 24 24"
-        width="24px"
-        fill="#000000"
+    <Popover.Reference>
+      <IconButton
+        disabled={disabled}
+        onClick={() => {
+          toggle()
+        }}
       >
-        <path d="M0 0h24v24H0V0z" fill="none" />
-        <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
-      </svg>
-    </IconButton>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
+        </svg>
+      </IconButton>
+    </Popover.Reference>
   )
 }
 
@@ -181,12 +178,14 @@ function InputTrigger() {
   const { toggle, disabled } = React.useContext(DropdownContext)
 
   return (
-    <TextField
-      onFocus={() => {
-        toggle()
-      }}
-      disabled={disabled}
-    />
+    <Popover.Reference>
+      <TextField
+        onFocus={() => {
+          toggle()
+        }}
+        disabled={disabled}
+      />
+    </Popover.Reference>
   )
 }
 
@@ -195,7 +194,7 @@ export const CustomTrigger: Story<DropdownStoryProps> = (args) => {
 
   function renderMenu() {
     return (
-      <Dropdown.Menu align={args.align}>
+      <Dropdown.Menu>
         {ACTIONS.map(({ label, value }) => (
           <Dropdown.Item
             key={value}
@@ -214,16 +213,18 @@ export const CustomTrigger: Story<DropdownStoryProps> = (args) => {
     <div className="flex flex-col">
       <div className="flex flex-row">
         <Dropdown {...args}>
-          <Dropdown.Trigger.Button outlined={args.outlined} trailing={null}>
-            {({ expanded }) => {
-              return (
-                <React.Fragment>
-                  <span className="mr-2">{expanded ? 'Hide' : 'See'} Options</span>
-                  <Icon name={expanded ? 'minus' : 'plus'} />
-                </React.Fragment>
-              )
-            }}
-          </Dropdown.Trigger.Button>
+          <Popover.Reference>
+            <Dropdown.Trigger.Button outlined={args.outlined} trailing={null}>
+              {({ expanded }) => {
+                return (
+                  <React.Fragment>
+                    <span className="mr-2">{expanded ? 'Hide' : 'See'} Options</span>
+                    <Icon name={expanded ? 'minus' : 'plus'} />
+                  </React.Fragment>
+                )
+              }}
+            </Dropdown.Trigger.Button>
+          </Popover.Reference>
           {renderMenu()}
         </Dropdown>
         <span className="inline-flex items-center mx-8 text-4xl font-thin border-l border-neutral"></span>

package/src/components/Dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useMemo, useRef } from 'react'
 import styled from 'styled-components'
 
 import {
@@ -12,8 +12,10 @@ import DropdownContext from './Dropdown.context'
 import DropdownTrigger from './DropdownTrigger'
 import hidden from 'styles/hidden'
 import useDropdown from './useDropdown'
+import { Popover } from 'components/Popover'
 
-import type { DropdownProps, GenericDropdownProps } from './Dropdown.types'
+import type { DropdownProps, GenericDropdownProps, DropdownMenuProps } from './Dropdown.types'
+import type { PopoverAlign } from 'components/Popover'
 
 const DropdownWrapper = styled.div`
   position: relative;
@@ -26,6 +28,25 @@ const HiddenCloseButton = styled.button.attrs({
   ${hidden(true)}
 `
 
+function useDeprecatedAlignFromMenu({
+  children,
+  align,
+}: React.PropsWithChildren<{ align?: PopoverAlign }>): PopoverAlign {
+  let result: PopoverAlign | undefined
+
+  if (align) {
+    return align
+  }
+
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement<DropdownMenuProps>(child) && child.type === DropdownMenu) {
+      result = child.props.align
+    }
+  })
+
+  return (result || align) as PopoverAlign
+}
+
 // TODO: add focus trap here to allow navigating options with keyboard
 
 /**
@@ -46,11 +67,19 @@ export function GenericDropdown(props: GenericDropdownProps): JSX.Element {
     disabled = false,
     expandDisabled = false,
     onBlur,
+    position,
     ...others
   } = props
-  const [contextValue, setContextValue] = useState({ expanded, toggle, disabled, expandDisabled })
+  const contextValue = useMemo(() => ({ expanded, toggle, disabled, expandDisabled }), [
+    expanded,
+    toggle,
+    disabled,
+    expandDisabled,
+  ])
   const ref = useRef(null)
 
+  const align = useDeprecatedAlignFromMenu(props)
+
   useClickOutside(
     ref,
     function handleClickOutside(event?: MouseEvent | TouchEvent | KeyboardEvent) {
@@ -64,20 +93,15 @@ export function GenericDropdown(props: GenericDropdownProps): JSX.Element {
     }
   )
 
-  useEffect(
-    function updateContextValue() {
-      setContextValue({ expanded, toggle, disabled, expandDisabled })
-    },
-    [expanded, toggle, disabled, expandDisabled]
-  )
-
   return (
     <DropdownWrapper {...others} role="menubar" ref={ref}>
       <DropdownContext.Provider value={contextValue}>
         <HiddenCloseButton disabled={disabled} onClick={toggle}>
           Close
         </HiddenCloseButton>
-        {children}
+        <Popover strategy="fixed" position={position} align={align}>
+          {children}
+        </Popover>
       </DropdownContext.Provider>
     </DropdownWrapper>
   )

package/src/components/Dropdown/Dropdown.types.ts

@@ -1,3 +1,4 @@
+import type { PopoverPlacement } from 'components/Popover'
 import type { ButtonProps } from 'components/Button'
 import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react'
 
@@ -13,7 +14,9 @@ export interface useDropdownReturn {
   collapse: () => void
 }
 
-export interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur'> {
+export interface DropdownProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur'>,
+    PopoverPlacement {
   disabled?: boolean
   /**
    * Use this prop to not allow the dropdown to be expanded.
@@ -32,6 +35,9 @@ export type DropdownTriggerProps = ButtonProps & {
 export interface DropdownMenuProps extends HTMLAttributes<HTMLDivElement> {
   header?: ReactNode
   footer?: ReactNode
+  /**
+   * @deprecated Use the `align` prop on <Dropdown> wrapper instead.
+   */
   align?: 'start' | 'end'
 }
 

package/src/components/Dropdown/DropdownMenu.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useContext } from 'react'
 import styled from 'styled-components'
 
 import { getToken as token } from 'theming'
-import { Popover as DefaultPopover } from 'components/Popover'
+import { Popover } from 'components/Popover'
 import disableable from 'styles/disableable'
 import DropdownContext from './Dropdown.context'
 import focusable from 'styles/focusable'
@@ -16,7 +16,6 @@ import type {
   DropdownMenuProps,
   DropdownMenuSectionProps,
 } from './Dropdown.types'
-import conditional, { whenProps } from 'tools/conditional'
 
 /**
  * TODO: add aria-labelledby that should refer to the dropdown label to the role="menu" container.
@@ -24,18 +23,15 @@ import conditional, { whenProps } from 'tools/conditional'
  * TODO: add animation for a smooth open/close effect.
  */
 
-const Popover = styled(DefaultPopover)<{ $align: 'start' | 'end' }>`
-  position: absolute;
-  top: calc(${token('dropdown-trigger-height')} + ${token('space-xs')});
-
-  ${conditional({
-    'left: 0;': whenProps({ $align: 'start' }),
-    'right: 0;': whenProps({ $align: 'end' }),
-  })}
-
+const StyledPopover = styled(Popover.Floating)`
   z-index: ${token('z-index-droplist')};
 
   min-width: 10em;
+
+  background: ${token('dropdown-background')};
+  border: 1px solid ${token('dropdown-border-color')};
+  border-radius: ${token('dropdown-border-radius')};
+  box-shadow: ${token('dropdown-shadow')};
 `
 
 const StyledSpan = styled.span`
@@ -197,7 +193,7 @@ export const DropdownMenu = forwardRef<HTMLDivElement, DropdownMenuProps>(functi
     throw new Error('DropdownMenu must be inside a DropdownContext')
   }
 
-  const { children, header, footer, align = 'start', ...others } = props
+  const { children, header, footer, ...others } = props
   const { expanded } = context
 
   if (!expanded) {
@@ -205,7 +201,7 @@ export const DropdownMenu = forwardRef<HTMLDivElement, DropdownMenuProps>(functi
   }
 
   return (
-    <Popover role="presentation" $align={align}>
+    <StyledPopover role="presentation">
       {header && <GenericDropdownMenuWrapper>{header}</GenericDropdownMenuWrapper>}
       {children && (
         <DropdownMenuWrapper ref={ref} role="menu" data-testid="dropdown-menu" {...others}>
@@ -213,7 +209,7 @@ export const DropdownMenu = forwardRef<HTMLDivElement, DropdownMenuProps>(functi
         </DropdownMenuWrapper>
       )}
       {footer && <GenericDropdownMenuWrapper>{footer}</GenericDropdownMenuWrapper>}
-    </Popover>
+    </StyledPopover>
   )
 })
 

package/src/components/Dropdown/DropdownTrigger.tsx

@@ -20,6 +20,7 @@ import type { ButtonHTMLAttributes, HTMLAttributes, MouseEvent } from 'react'
 import type { DropdownTriggerProps, DropdownContextReturn } from './Dropdown.types'
 import type { IconProps } from 'components/Icon'
 import type ColorScheme from 'utils/types/ColorScheme'
+import { Popover } from 'components/Popover'
 
 /**
  * TODO: throw an error if context is not available
@@ -342,11 +343,13 @@ function DropdownTrigger(props: DropdownTriggerProps): JSX.Element {
   const { children, className, ...others } = props
 
   return (
-    <GenericDropdownTrigger className={className} outlined={props.outlined}>
-      <DropdownTriggerButton {...others} data-text={children}>
-        {children}
-      </DropdownTriggerButton>
-    </GenericDropdownTrigger>
+    <Popover.Reference>
+      <GenericDropdownTrigger className={className} outlined={props.outlined}>
+        <DropdownTriggerButton {...others} data-text={children}>
+          {children}
+        </DropdownTriggerButton>
+      </GenericDropdownTrigger>
+    </Popover.Reference>
   )
 }
 

package/src/components/Popover/Popover.stories.tsx

@@ -3,20 +3,41 @@ import type { Story, Meta } from '@storybook/react/types-6-0'
 
 import Popover from './Popover'
 
-import type { PopoverProps } from './Popover'
+import type { PopoverProps } from './Popover.types'
 
 export default {
   title: 'Components/Popover',
   component: Popover,
+  argTypes: {
+    position: {
+      control: {
+        type: 'radio',
+        options: ['top', 'right', 'bottom', 'left'],
+      },
+    },
+    align: {
+      control: {
+        type: 'radio',
+        options: ['start', 'center', 'end'],
+      },
+    },
+  },
 } as Meta
 
 export const Playground: Story<PopoverProps> = ({ children, ...args }: PopoverProps) => {
   return (
     <div className="flex flex-col space-y-2">
       <div className="flex items-center">
-        <Popover {...args}>
-          <div className="flex items-center p-4">{children}</div>
-        </Popover>
+        <div style={{ maxHeight: 100, overflow: 'scroll', border: 'solid 1px black' }}>
+          <div style={{ height: 250, paddingTop: 100 }}>
+            <Popover {...args}>
+              <Popover.Reference>Reference</Popover.Reference>
+              <Popover.Floating style={{ background: 'white', pointerEvents: 'none' }}>
+                {children}
+              </Popover.Floating>
+            </Popover>
+          </div>
+        </div>
       </div>
     </div>
   )
@@ -24,4 +45,6 @@ export const Playground: Story<PopoverProps> = ({ children, ...args }: PopoverPr
 
 Playground.args = {
   children: 'Just a floating content',
+  position: 'bottom',
+  align: 'center',
 }