@ultraviolet/ui 1.8.4 → 1.10.0

package/dist/src/components/Modal/Dialog.js

@@ -0,0 +1,151 @@
+import _styled from '@emotion/styled/base';
+import { useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { MODAL_WIDTH, MODAL_PLACEMENT } from './constants.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const StyledBackdrop = /*#__PURE__*/_styled("div", {
+  target: "e1cqen9h1"
+})("position:fixed;top:0;right:0;height:0;width:0;overflow:hidden;background-color:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.overlay;
+}, ";&[data-open='true']{padding:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['2'];
+}, ";overflow:auto;display:flex;bottom:0;left:0;height:100%;width:100%;}");
+const StyledDialog = /*#__PURE__*/_styled("dialog", {
+  target: "e1cqen9h0"
+})("background-color:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.backgroundWeakElevated;
+}, ";position:relative;border-radius:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.radii.default;
+}, ";border:0;padding:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.space['3'];
+}, ";width:", MODAL_WIDTH.medium, "px;box-shadow:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.shadows.modal;
+}, ";", /*#__PURE__*/Object.entries(MODAL_WIDTH).map(_ref7 => {
+  let [size, value] = _ref7;
+  return `
+      &[data-size="${size}"] {
+        width: ${value}px;
+      }
+      `;
+}), " ", /*#__PURE__*/Object.entries(MODAL_PLACEMENT).map(_ref8 => {
+  let [placement, value] = _ref8;
+  return `
+        &[data-placement="${placement}"] {
+          ${value}
+        }
+        `;
+}), ";");
+const Dialog = _ref9 => {
+  let {
+    children,
+    open,
+    placement,
+    onClose,
+    hideOnClickOutside,
+    size,
+    id,
+    ariaLabel,
+    className,
+    'data-testid': dataTestId,
+    preventBodyScroll,
+    hideOnEsc,
+    backdropClassName,
+    dialogCss,
+    backdropCss
+  } = _ref9;
+  const containerRef = useRef(document.createElement('div'));
+  const onCloseRef = useRef(onClose);
+
+  // Portal to put the modal in
+  useEffect(() => {
+    const element = containerRef.current;
+    if (open) {
+      document.body.appendChild(element);
+    }
+    return () => {
+      if (document.body.contains(element)) {
+        document.body.removeChild(element);
+      }
+    };
+  }, [open]);
+
+  // Save the reassignment of eventHandler in the useEffect below
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+
+  // Handle hide on esc press
+  useEffect(() => {
+    const handleEscPress = event => {
+      if (event.key === 'Escape' && hideOnEsc) {
+        onCloseRef.current();
+      }
+    };
+    if (open) {
+      document.addEventListener('keyup', handleEscPress);
+    }
+    return () => {
+      document.removeEventListener('keyup', handleEscPress);
+    };
+  }, [open, onCloseRef, hideOnEsc]);
+
+  // Handle body scroll
+  useEffect(() => {
+    if (open && preventBodyScroll) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+  }, [preventBodyScroll, open]);
+
+  // Stop click to prevent unexpected dialog close
+  const stopClick = useCallback(event => {
+    event.stopPropagation();
+  }, []);
+
+  // Stop key up : used when having inputs in modals
+  const stopKeyUp = useCallback(event => {
+    event.stopPropagation();
+  }, []);
+  return /*#__PURE__*/createPortal(jsx(StyledBackdrop, {
+    "data-open": open,
+    onClick: hideOnClickOutside ? onClose : undefined,
+    className: backdropClassName,
+    css: backdropCss,
+    "data-testid": dataTestId ? `${dataTestId}-backdrop` : undefined,
+    children: jsx(StyledDialog, {
+      css: dialogCss,
+      onKeyUp: stopKeyUp,
+      className: className,
+      id: id,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      "data-placement": placement,
+      "data-size": size,
+      open: open,
+      onClick: stopClick,
+      children: open ? children : null
+    })
+  }), containerRef.current);
+};
+
+export { Dialog };

package/dist/src/components/Modal/Disclosure.js

@@ -0,0 +1,38 @@
+import { useEffect, isValidElement, cloneElement, createRef } from 'react';
+
+const Disclosure = _ref => {
+  let {
+    disclosure,
+    handleOpen,
+    visible,
+    handleClose,
+    toggle,
+    id
+  } = _ref;
+  const disclosureRef = /*#__PURE__*/createRef();
+  useEffect(() => {
+    const element = disclosureRef.current;
+    element?.addEventListener('click', handleOpen);
+    return () => {
+      element?.removeEventListener('click', handleOpen);
+    };
+  }, [handleOpen, disclosureRef]);
+  if (typeof disclosure === 'function') {
+    return disclosure({
+      visible,
+      onClose: handleClose,
+      toggle,
+      onOpen: handleOpen,
+      modalId: id
+    });
+  }
+  if ( /*#__PURE__*/isValidElement(disclosure)) {
+    return /*#__PURE__*/cloneElement(disclosure, {
+      ...disclosure.props,
+      ref: disclosureRef
+    });
+  }
+  return null;
+};
+
+export { Disclosure };

package/dist/src/components/Modal/Modal.js

@@ -0,0 +1,110 @@
+import _styled from '@emotion/styled/base';
+import { useState, useId, useCallback } from 'react';
+import { Button } from '../Button/index.js';
+import { Dialog } from './Dialog.js';
+import { Disclosure } from './Disclosure.js';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+
+const StyledContainer = /*#__PURE__*/_styled("div", {
+  target: "e227mx40"
+})("position:absolute;top:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['2'];
+}, ";right:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['2'];
+}, ";");
+const Modal = _ref3 => {
+  let {
+    ariaLabel = 'modal',
+    id,
+    children,
+    disclosure,
+    hideOnClickOutside = true,
+    hideOnEsc = true,
+    isClosable = true,
+    onClose,
+    onBeforeClose,
+    opened = false,
+    placement = 'center',
+    preventBodyScroll = true,
+    size,
+    className,
+    'data-testid': dataTestId,
+    backdropClassName,
+    width = 'small',
+    customDialogStyles,
+    customDialogBackdropStyles
+  } = _ref3;
+  const [visible, setVisible] = useState(opened);
+  const controlId = useId();
+  const handleOpen = useCallback(() => {
+    setVisible(true);
+  }, []);
+  const handleClose = useCallback(() => {
+    if (onClose) {
+      onClose();
+    } else {
+      const promise = onBeforeClose?.();
+      if (promise && 'catch' in promise) {
+        promise.catch(undefined);
+      }
+      setVisible(false);
+    }
+  }, [onBeforeClose, onClose]);
+  const handleToggle = useCallback(() => {
+    setVisible(current => !current);
+  }, []);
+  const finalId = id ?? controlId;
+  const finalSize = size ?? width;
+  return jsxs(Fragment, {
+    children: [jsx(Disclosure, {
+      id: finalId,
+      handleOpen: handleOpen,
+      disclosure: disclosure,
+      handleClose: handleClose,
+      visible: visible,
+      toggle: handleToggle
+    }), jsx(Dialog, {
+      open: visible,
+      placement: placement,
+      size: finalSize,
+      ariaLabel: ariaLabel,
+      hideOnClickOutside: hideOnClickOutside,
+      hideOnEsc: hideOnEsc,
+      preventBodyScroll: preventBodyScroll,
+      onClose: handleClose,
+      className: className,
+      backdropClassName: backdropClassName,
+      "data-testid": dataTestId,
+      id: finalId,
+      dialogCss: customDialogStyles,
+      backdropCss: customDialogBackdropStyles,
+      children: jsxs(Fragment, {
+        children: [typeof children === 'function' ? children({
+          visible,
+          onClose: handleClose,
+          onOpen: handleOpen,
+          toggle: handleToggle,
+          modalId: finalId
+        }) : children, jsx(StyledContainer, {
+          children: isClosable ? jsx(Button, {
+            "data-testid": dataTestId ? `${dataTestId}-close-button` : undefined,
+            onClick: handleClose,
+            variant: "ghost",
+            size: "small",
+            icon: "close",
+            sentiment: "neutral",
+            "aria-label": "close"
+          }) : null
+        })]
+      })
+    })]
+  });
+};
+
+export { Modal };

package/dist/src/components/Modal/constants.js

@@ -0,0 +1,50 @@
+const MODAL_WIDTH = {
+  large: 850,
+  medium: 708,
+  small: 616,
+  xsmall: 400,
+  xxsmall: 360
+};
+const MODAL_PLACEMENT = {
+  bottom: `
+    margin: auto;
+    margin-bottom: 0;
+  `,
+  'bottom-left': `
+    margin: auto;
+    margin-left: 0;
+    margin-bottom: 0;
+  `,
+  'bottom-right': `
+    margin: auto;
+    margin-right: 0;
+    margin-bottom: 0;
+  `,
+  center: `
+    margin: auto;
+  `,
+  left: `
+    margin: auto;
+    margin-left: 0;
+  `,
+  right: `
+    margin: auto;
+    margin-right: 0;
+  `,
+  top: `
+    margin: auto;
+    margin-top: 0px;
+  `,
+  'top-left': `
+    margin: auto;
+    margin-left: 0;
+    margin-top: 0;
+  `,
+  'top-right': `
+    margin: auto;
+    margin-right: 0;
+    margin-top: 0;
+  `
+};
+
+export { MODAL_PLACEMENT, MODAL_WIDTH };

package/dist/src/components/RadioGroup/index.js

@@ -0,0 +1,131 @@
+import _styled from '@emotion/styled/base';
+import { Icon } from '@ultraviolet/icons';
+import { useMemo, createContext, useContext } from 'react';
+import { Radio } from '../Radio/index.js';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+function _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 RadioGroupContext = /*#__PURE__*/createContext(undefined);
+const RadioGroupRadio = _ref => {
+  let {
+    onFocus,
+    onBlur,
+    disabled,
+    error,
+    name,
+    value,
+    label,
+    helper,
+    className,
+    autoFocus,
+    onKeyDown,
+    'data-testid': dataTestId
+  } = _ref;
+  const context = useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error('RadioGroup.Radio can only be used inside a RadioGroup');
+  }
+  const {
+    groupName,
+    onChange,
+    groupValue
+  } = context;
+  const radioName = `${groupName}-${name ?? ''}`;
+  return jsx(Radio, {
+    onChange: onChange,
+    checked: `${groupName}-${groupValue}` === radioName,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    disabled: disabled,
+    error: error,
+    name: radioName,
+    value: value,
+    label: label,
+    helper: helper,
+    className: className,
+    autoFocus: autoFocus,
+    onKeyDown: onKeyDown,
+    "data-testid": dataTestId
+  });
+};
+const FieldSet = /*#__PURE__*/_styled("fieldset", {
+  target: "e15shfap1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "7o2an9",
+  styles: "border:none;padding:0;margin:0"
+} : {
+  name: "7o2an9",
+  styles: "border:none;padding:0;margin:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledRequiredIcon = /*#__PURE__*/_styled(Icon, {
+  target: "e15shfap0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1nglpc5",
+  styles: "vertical-align:super"
+} : {
+  name: "1nglpc5",
+  styles: "vertical-align:super",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const RadioGroup = _ref2 => {
+  let {
+    legend,
+    value,
+    className,
+    helper,
+    error,
+    direction = 'column',
+    children,
+    onChange,
+    name,
+    required = false
+  } = _ref2;
+  const contextValue = useMemo(() => ({
+    groupName: name,
+    groupValue: value,
+    onChange,
+    required
+  }), [name, value, onChange, required]);
+  return jsx(RadioGroupContext.Provider, {
+    value: contextValue,
+    children: jsxs(Stack, {
+      gap: 1,
+      children: [jsx(FieldSet, {
+        className: className,
+        children: jsxs(Stack, {
+          gap: 1.5,
+          children: [jsxs(Text, {
+            as: "legend",
+            variant: "bodyStrong",
+            children: [legend, "\xA0", required ? jsx(StyledRequiredIcon, {
+              name: "asterisk",
+              color: "danger",
+              size: 8
+            }) : null]
+          }), jsx(Stack, {
+            gap: direction === 'column' ? 1 : 2,
+            direction: direction,
+            children: children
+          })]
+        })
+      }), helper ? jsx(Text, {
+        as: "p",
+        variant: "bodySmall",
+        prominence: "weak",
+        children: helper
+      }) : null, error ? jsx(Text, {
+        as: "p",
+        variant: "bodySmall",
+        sentiment: "danger",
+        prominence: "weak",
+        children: error
+      }) : null]
+    })
+  });
+};
+RadioGroup.Radio = RadioGroupRadio;
+
+export { RadioGroup };

package/dist/src/components/Toggle/index.js

@@ -1,8 +1,11 @@
 import _styled from '@emotion/styled/base';
 import { Icon } from '@ultraviolet/icons';
 import { forwardRef, useState, useId, useCallback, useEffect } from 'react';
+import { Row } from '../Row/index.js';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
 import { Tooltip } from '../Tooltip/index.js';
-import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 function _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 SIZES = {
@@ -39,65 +42,75 @@ const StyledToggle = /*#__PURE__*/_styled("div", {
     size
   } = _ref4;
   return SIZES[size].height;
-}, "px;&:after{content:'';position:absolute;top:", _ref5 => {
+}, "px;&:hover{background-color:", _ref5 => {
   let {
-    size
+    theme
   } = _ref5;
-  return SIZES[size].height / 2 - SIZES[size].ball / 2;
-}, "px;left:5px;width:", _ref6 => {
+  return theme.colors.neutral.backgroundStrongHover;
+}, ";}&:after{content:'';position:absolute;top:", _ref6 => {
   let {
     size
   } = _ref6;
-  return SIZES[size].ball;
-}, "px;height:", _ref7 => {
+  return SIZES[size].height / 2 - SIZES[size].ball / 2;
+}, "px;left:5px;width:", _ref7 => {
   let {
     size
   } = _ref7;
   return SIZES[size].ball;
-}, "px;border-radius:", _ref8 => {
+}, "px;height:", _ref8 => {
   let {
-    theme
+    size
   } = _ref8;
-  return theme.radii.circle;
-}, ";background-color:", _ref9 => {
+  return SIZES[size].ball;
+}, "px;border-radius:", _ref9 => {
   let {
     theme
   } = _ref9;
-  return theme.colors.neutral.background;
-}, ";transition:all 300ms;}&:focus-within,&:focus{box-shadow:", _ref10 => {
+  return theme.radii.circle;
+}, ";background-color:", _ref10 => {
   let {
     theme
   } = _ref10;
-  return theme.shadows.focusPrimary;
-}, ";}&[data-disabled='false']:active:after{width:", _ref11 => {
+  return theme.colors.neutral.background;
+}, ";transition:all 300ms;}&:focus-within,&:focus{box-shadow:", _ref11 => {
   let {
-    size
+    theme
   } = _ref11;
+  return theme.shadows.focusNeutral;
+}, ";}&[data-disabled='false']:active:after{width:", _ref12 => {
+  let {
+    size
+  } = _ref12;
   return SIZES[size].ball * 1.3775;
-}, "px;}&[data-checked='true']{color:", _ref12 => {
+}, "px;}&[data-checked='true']{color:", _ref13 => {
   let {
     theme
-  } = _ref12;
+  } = _ref13;
   return theme.colors.neutral.textStrong;
-}, ";background-color:", _ref13 => {
+}, ";background-color:", _ref14 => {
   let {
     theme
-  } = _ref13;
+  } = _ref14;
   return theme.colors.primary.backgroundStrong;
-}, ";&:after{left:calc(100% - 5px);transform:translateX(-100%);}&:focus-within,&:focus{box-shadow:", _ref14 => {
+}, ";&:hover{background-color:", _ref15 => {
   let {
     theme
-  } = _ref14;
+  } = _ref15;
+  return theme.colors.primary.backgroundStrongHover;
+}, ";}&:after{left:calc(100% - 5px);transform:translateX(-100%);}&:focus-within,&:focus{box-shadow:", _ref16 => {
+  let {
+    theme
+  } = _ref16;
   return theme.shadows.focusPrimary;
-}, ";}}&[data-disabled='true']{background:", _ref15 => {
+}, ";}}&[data-disabled='true']{background:", _ref17 => {
   let {
     theme
-  } = _ref15;
+  } = _ref17;
   return theme.colors.neutral.backgroundStrongDisabled;
-}, ";&[data-checked='true']{background:", _ref16 => {
+}, ";&[data-checked='true']{background:", _ref18 => {
   let {
     theme
-  } = _ref16;
+  } = _ref18;
   return theme.colors.primary.backgroundStrongDisabled;
 }, ";}}");
 const StyledCheckbox = /*#__PURE__*/_styled("input", {
@@ -112,20 +125,25 @@ const StyledCheckbox = /*#__PURE__*/_styled("input", {
 });
 const StyledLabel = /*#__PURE__*/_styled("label", {
   target: "e1wstm610"
-})("display:flex;gap:", _ref17 => {
+})("display:flex;gap:", _ref19 => {
   let {
     theme
-  } = _ref17;
+  } = _ref19;
   return theme.space['1'];
-}, ";align-items:center;width:fit-content;cursor:pointer;&:active ", StyledToggle, "[data-disabled='false']:after{width:", _ref18 => {
+}, ";align-items:start;width:fit-content;cursor:pointer;flex-direction:", _ref20 => {
+  let {
+    labelPosition
+  } = _ref20;
+  return labelPosition === 'left' ? 'row' : 'row-reverse';
+}, ";&:active ", StyledToggle, "[data-disabled='false']:after{width:", _ref21 => {
   let {
     size
-  } = _ref18;
+  } = _ref21;
   return SIZES[size].ball * 1.3775;
-}, "px;}&[aria-disabled='true']{cursor:not-allowed;color:", _ref19 => {
+}, "px;}&[aria-disabled='true']{cursor:not-allowed;color:", _ref22 => {
   let {
     theme
-  } = _ref19;
+  } = _ref22;
   return theme.colors.neutral.textDisabled;
 }, ";}");
 const RequiredIcon = () => jsx("sup", {
@@ -135,7 +153,7 @@ const RequiredIcon = () => jsx("sup", {
     color: "danger"
   })
 });
-const Toggle = /*#__PURE__*/forwardRef((_ref20, ref) => {
+const Toggle = /*#__PURE__*/forwardRef((_ref23, ref) => {
   let {
     checked = false,
     disabled = false,
@@ -146,10 +164,11 @@ const Toggle = /*#__PURE__*/forwardRef((_ref20, ref) => {
     tooltip,
     labelPosition = 'right',
     label,
+    helper,
     required,
     className,
     'data-testid': dataTestId
-  } = _ref20;
+  } = _ref23;
   const [state, setState] = useState(checked);
   const uniqueId = useId();
   const onLocalChange = useCallback(event => {
@@ -166,9 +185,22 @@ const Toggle = /*#__PURE__*/forwardRef((_ref20, ref) => {
       onClick: evt => evt.stopPropagation(),
       className: className,
       "data-testid": dataTestId,
-      children: [label && labelPosition === 'left' ? jsxs(Fragment, {
-        children: [label, required ? jsx(RequiredIcon, {}) : null]
-      }) : null, jsx(StyledToggle, {
+      labelPosition: labelPosition,
+      children: [jsxs(Stack, {
+        gap: 0.25,
+        alignItems: "baseline",
+        children: [label ? jsxs(Row, {
+          templateColumns: "auto 1fr",
+          gap: 1,
+          alignItems: "center",
+          children: [label, required ? jsx(RequiredIcon, {}) : null]
+        }) : null, helper ? jsx(Text, {
+          as: "p",
+          variant: "bodySmall",
+          prominence: "weak",
+          children: helper
+        }) : null]
+      }), jsx(StyledToggle, {
         size: size,
         "data-checked": state,
         "data-disabled": disabled,
@@ -182,9 +214,7 @@ const Toggle = /*#__PURE__*/forwardRef((_ref20, ref) => {
           type: "checkbox",
           ref: ref
         })
-      }), label && labelPosition === 'right' ? jsxs(Fragment, {
-        children: [label, required ? jsx(RequiredIcon, {}) : null]
-      }) : null]
+      })]
     })
   });
 });

package/dist/src/index.js

@@ -28,7 +28,7 @@ export { List } from './components/List/index.js';
 export { Loader } from './components/Loader/index.js';
 export { Menu } from './components/Menu/index.js';
 export { Meter } from './components/Meter/Meter.js';
-export { Modal } from './components/Modal/index.js';
+export { Modal } from './components/Modal/Modal.js';
 export { Notice } from './components/Notice/index.js';
 export { NumberInput } from './components/NumberInput/index.js';
 export { Pagination } from './components/Pagination/index.js';
@@ -61,4 +61,5 @@ export { ToastContainer, toast } from './components/Toaster/index.js';
 export { Toggle } from './components/Toggle/index.js';
 export { Tooltip } from './components/Tooltip/index.js';
 export { VerificationCode } from './components/VerificationCode/index.js';
+export { RadioGroup } from './components/RadioGroup/index.js';
 export { Icon } from '@ultraviolet/icons';