@project44-manifest/react
Version:
Manifest Design System react components
1,362 lines (1,335 loc) • 336 kB
JavaScript
const _excluded = ["as", "children", "className", "href", "css"],
_excluded2 = ["as", "children", "className", "css"],
_excluded3 = ["as", "children", "className", "css"],
_excluded4 = ["as", "children", "className", "css", "size", "src"],
_excluded5 = ["alt", "as", "children", "className", "css", "fallback", "size", "src"],
_excluded6 = ["as", "className", "css"],
_excluded7 = ["as", "children", "className", "css"],
_excluded8 = ["as", "children", "className", "css"],
_excluded9 = ["as", "children", "className", "css", "href"],
_excluded10 = ["as", "autoFocus", "children", "className", "css", "isDisabled", "endIcon", "href", "onClick", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "rel", "size", "startIcon", "variant", "target", "type"],
_excluded11 = ["as", "children", "className", "css", "isDisabled", "isAttached", "size", "variant"],
_excluded12 = ["className", "css", "size"],
_excluded13 = ["as", "className", "css", "icon"],
_excluded14 = ["as", "className", "css", "variant", "color"],
_excluded15 = ["className", "css", "orientation"],
_excluded16 = ["as", "className", "css"],
_excluded17 = ["as", "align", "className", "css", "gap", "justify", "orientation", "wrap"],
_excluded18 = ["as", "className", "css", "size"],
_excluded19 = ["as", "className", "css", "state", "loading", "noResultsChildren", "loadingText"],
_excluded20 = ["as", "className", "css", "showCalendar", "showRanges", "ranges"],
_excluded21 = ["as", "children", "className", "css"],
_excluded22 = ["as", "children", "className", "css"],
_excluded23 = ["as", "children", "className", "css"],
_excluded24 = ["as", "children", "className", "css"],
_excluded25 = ["children", "className", "in", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "style", "timeout"],
_excluded26 = ["children", "in", "duration", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "style", "timeout"],
_excluded27 = ["children", "className", "css", "helperText", "helperTextProps", "isRequired", "label", "labelProps", "orientation", "validationState"],
_excluded28 = ["as", "children", "className", "css"],
_excluded29 = ["children", "locale", "disableCSSBaseline", "style"],
_excluded30 = ["as", "children", "className", "css", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "onClose", "shouldCloseOnBlur", "shouldCloseOnInteractOutside"],
_excluded31 = ["as", "className", "css", "fixed", "maxWidth"],
_excluded32 = ["children", "className", "css"],
_excluded33 = ["as", "autoFocus", "children", "className", "css", "isActive", "isDisabled"],
_excluded34 = ["as", "boundaries", "children", "className", "css", "defaultPage", "getPaginationLabel", "getItemAriaLabel", "onChange", "nextLabel", "page", "previousLabel", "rowsPerPage", "siblings", "showLabel", "showPageNumbers", "totalRowCount"],
_excluded35 = ["data", "defaultColumn", "columns", "enableCheckboxForChildren", "enableExpandAll", "enableExpanding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableRowClick", "showCanExpandIcon", "expandAllButtonProps", "expandButtonProps", "initialState", "isLoading", "manualExpanding", "manualPagination", "manualSorting", "pageCount", "paginationProps", "footerProps", "selectAllCheckboxProps", "selectCheckboxProps", "rowCount", "state", "onExpandedChange", "onPaginationChange", "onRowSelectionChange", "onSortingChange", "onScroll", "onRowClick", "autoResetExpanded", "getSubRows", "getRowId"],
_excluded36 = ["as", "children", "className", "css", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "onClose"],
_excluded37 = ["isOpen"],
_excluded38 = ["as", "children", "className", "css", "isDismissable", "onClose", "role"],
_excluded39 = ["isDismissable", "isKeyboardDismissDisabled", "isOpen", "onClose"],
_excluded40 = ["as", "children", "className", "css"],
_excluded41 = ["as", "children", "className", "css", "buttonGroupProps"],
_excluded42 = ["as", "buttonProps", "children", "className", "css", "typographyProps"],
_excluded43 = ["defaultOpen", "children", "closeOnSelect", "isOpen", "offset", "placement", "shouldFlip", "onOpenChange", "trigger", "type"],
_excluded44 = ["as", "className", "css"],
_excluded45 = ["children", "in", "duration", "onEnter", "onExit", "style", "timeout"],
_excluded46 = ["as", "className", "columnGap", "columns", "css", "flow", "gap", "rowGap", "rows"],
_excluded47 = ["area", "as", "className", "css", "column", "columnEnd", "columnStart", "order", "row", "rowEnd", "rowStart"],
_excluded48 = ["as", "children", "className", "css", "variant"],
_excluded49 = ["as", "autoFocus", "children", "className", "css", "isSelected", "variant", "onClick", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp"],
_excluded50 = ["as", "children", "className", "css", "localNavigationItemProps", "title"],
_excluded51 = ["as", "children", "className", "css"],
_excluded52 = ["as", "children", "className", "css", "endIcon", "startIcon", "label", "labelProps", "isSelected"],
_excluded53 = ["as", "children", "className", "css", "defaultExpanded", "iconProps", "isExpanded", "itemProps", "label", "labelProps", "onExpandedChange", "startIcon", "isSelected"],
_excluded54 = ["as", "className", "css", "gap", "orientation"],
_excluded55 = ["as", "children", "className", "css", "isCopyable", "isDisabled", "isRemovable", "label", "onRemove", "removeButtonProps", "startAdornment"],
_excluded56 = ["className", "children"],
_excluded57 = ["defaultOpen", "children", "delay", "isOpen", "isDisabled", "placement", "onOpenChange", "title", "trigger"],
_excluded58 = ["className", "helperTextProps", "customLocale", "inputProps", "inputRef", "labelProps", "onChange", "size"],
_excluded59 = ["as", "className", "colorScheme", "css", "icon", "isCollapsible", "label"],
_excluded60 = ["as", "className", "children", "css", "orientation"],
_excluded61 = ["as", "isFocusable"],
_excluded62 = ["as", "autoFocus", "className", "css", "label", "endAdornment", "startAdornment", "value"],
_excluded63 = ["as", "children", "className", "css", "defaultOpen", "isOpen", "onOpenChange"],
_excluded64 = ["as", "children", "className", "css"],
_excluded65 = ["as", "avatarProps", "children", "className", "css", "subTitle", "title"],
_excluded66 = ["as", "children", "className", "css", "logo"],
_excluded67 = ["className"],
_excluded68 = ["className", "isExpanded", "isSelected"],
_excluded69 = ["className"],
_excluded70 = ["as", "children", "className", "css", "isDense", "showHover", "onMouseEnter", "onMouseLeave"],
_excluded71 = ["as", "children", "className", "css"],
_excluded72 = ["as", "align", "children", "className", "css", "onMouseEnter"],
_excluded73 = ["as", "align", "children", "className", "css", "isActive", "isSortable", "sortDirection"],
_excluded74 = ["as", "children", "className", "css"],
_excluded75 = ["as", "children", "className", "css"],
_excluded76 = ["as", "children", "className", "css", "onMouseEnter", "onMouseLeave"],
_excluded77 = ["className", "helperTextProps", "inputProps", "inputRef", "labelProps", "onChange"],
_excluded78 = ["className", "helperTextProps", "inputProps", "inputRef", "labelProps", "onChange", "size"],
_excluded79 = ["action", "as", "children", "className", "css", "dismissButtonProps", "id", "isDismissable", "isVisible", "onDismiss", "description", "message", "variant"],
_excluded80 = ["as", "className", "css", "duration"],
_excluded81 = ["id", "visible"];
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
// Bundled with Packemon: https://packemon.dev
// Platform: browser, Support: stable, Format: esm
import { Item, Section } from '@react-stately/collections';
import * as React from 'react';
import React__default, { createContext as createContext$1, useContext, useState, useCallback, useEffect } from 'react';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { styled, card, pxToRem, cx, css, keyframes, globalCss, theme, focus, table, tableBody, tableCell, tableColumn, tableFooter, tableHeader, tableRow } from '@project44-manifest/react-styles';
export * from '@project44-manifest/react-styles';
import { ArrowRight, ChevronRight, Cube, ChevronDown, Sort, ChevronUp, ChevronLeft, Calendar as Calendar$1, Close, Check, CopyAll, Expanded, Collapsed, InfoCircleFilled, ExclamationPointTriangleFilled, BackslashCircleFilled, CheckCircleFilled } from '@project44-manifest/react-icons';
import { useButton } from '@react-aria/button';
export { useButton } from '@react-aria/button';
import { useFocusRing, FocusScope } from '@react-aria/focus';
export { FocusRing, FocusScope, useFocusRing } from '@react-aria/focus';
import { useHover, usePress, setInteractionModality, useInteractionModality } from '@react-aria/interactions';
export { useFocus, useHover } from '@react-aria/interactions';
import clsx from 'clsx';
import isObject from 'lodash.isobject';
import { ModalProvider, useModalProvider, Overlay as Overlay$1, useOverlay, useModal, DismissButton, useOverlayTrigger, useOverlayPosition, usePreventScroll, useOverlayFocusContain } from '@react-aria/overlays';
export { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
import { useTooltipTrigger, useTooltip } from '@react-aria/tooltip';
import { useTooltipTriggerState } from '@react-stately/tooltip';
import { useLocale, useDateFormatter, useCollator, I18nProvider, useFilter } from '@react-aria/i18n';
export { useAsyncList, useTreeData } from '@react-stately/data';
import { useOverlayTriggerState } from '@react-stately/overlays';
export { useOverlayTriggerState } from '@react-stately/overlays';
import { useCalendarCell, useCalendarGrid, useCalendar, useRangeCalendar } from '@react-aria/calendar';
import { useCalendarState, useRangeCalendarState } from '@react-stately/calendar';
import { isSameMonth, getDayOfWeek, isSameDay, isToday, getWeeksInMonth, endOfMonth, createCalendar, endOfWeek, startOfWeek, startOfMonth, CalendarDate } from '@internationalized/date';
import { useSeparator } from '@react-aria/separator';
import { mergeProps as mergeProps$1, mergeRefs as mergeRefs$1, filterDOMProps, useId, chain, useLayoutEffect } from '@react-aria/utils';
import { ListCollection, useListState } from '@react-stately/list';
import { useOption, useListBoxSection, useListBox } from '@react-aria/listbox';
import { useCheckbox } from '@react-aria/checkbox';
import { useToggleState } from '@react-stately/toggle';
import TransitionComponent from 'react-transition-group/Transition';
import { useComboBox } from '@react-aria/combobox';
import { useComboBoxState } from '@react-stately/combobox';
import { flexRender, useReactTable, getCoreRowModel, getExpandedRowModel, getPaginationRowModel, getSortedRowModel, createColumnHelper } from '@tanstack/react-table';
import ContentLoader from 'react-content-loader';
import { useControlledState as useControlledState$1 } from '@react-stately/utils';
import { useDatePicker, useDateRangePicker } from '@react-aria/datepicker';
import { useDatePickerState, useDateRangePickerState } from '@react-stately/datepicker';
import { useDialog } from '@react-aria/dialog';
import { useMenuTrigger, useMenuItem, useMenuSection, useMenu } from '@react-aria/menu';
import { useMenuTriggerState } from '@react-stately/menu';
import { useTreeState } from '@react-stately/tree';
import { useField } from '@react-aria/label';
import { ListKeyboardDelegate, useTypeSelect } from '@react-aria/selection';
import { useVisuallyHidden } from '@react-aria/visually-hidden';
import { useNumberField } from '@react-aria/numberfield';
import { useNumberFieldState } from '@react-stately/numberfield';
import * as ReactDom from 'react-dom';
import { useRadioGroup, useRadio } from '@react-aria/radio';
import { useRadioGroupState } from '@react-stately/radio';
import { useSelect, HiddenSelect } from '@react-aria/select';
import { useSelectState } from '@react-stately/select';
import { useSwitch } from '@react-aria/switch';
import { useTextField } from '@react-aria/textfield';
import hotToast, { useToaster } from 'react-hot-toast/headless';
const StyledActionCard = styled('a', card, {
display: 'inline-block',
color: '$text-primary',
textDecoration: 'none'
});
const StyledActionCardBody = styled('div', {
px: '$large',
paddingBottom: '$large',
typography: '$body',
width: '100%'
});
const StyledActionCardHeader = styled('div', {
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
width: '100%',
p: '$large',
typography: '$title'
});
const StyledActionCardImage = styled('div', {
display: 'block',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
objectFit: 'cover',
variants: {
size: {
large: {
height: pxToRem(180),
minWidth: pxToRem(352)
},
small: {
height: pxToRem(130),
minWidth: pxToRem(320)
}
}
},
defaultVariants: {
size: 'large'
}
});
const ActionCard = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
href = props.href,
css = props.css,
other = _objectWithoutProperties(props, _excluded);
const className = cx('manifest-action-card', classNameProp);
return /*#__PURE__*/jsx(StyledActionCard, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: css,
href: href,
children: children
}));
});
ActionCard.displayName = 'ActionCard';
/* -------------------------------------------------------------------------------------------------
* ActionCardBody
* -----------------------------------------------------------------------------------------------*/
const ActionCardBody = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
other = _objectWithoutProperties(props, _excluded2);
const className = cx('manifest-action-card-body', classNameProp);
return /*#__PURE__*/jsx(StyledActionCardBody, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: css,
children: children
}));
});
ActionCardBody.displayName = 'ActionCardBody';
/* -------------------------------------------------------------------------------------------------
* ActionCardHeader
* -----------------------------------------------------------------------------------------------*/
const ActionCardHeader = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
other = _objectWithoutProperties(props, _excluded3);
const className = cx('manifest-action-card-header', classNameProp);
return /*#__PURE__*/jsxs(StyledActionCardHeader, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: css,
children: [children, /*#__PURE__*/jsx(ArrowRight, {
"aria-hidden": true,
className: "manifest-action-card-header__icon"
})]
}));
});
ActionCardHeader.displayName = 'ActionCardHeader';
/* -------------------------------------------------------------------------------------------------
* ActionCardImage
* -----------------------------------------------------------------------------------------------*/
const ActionCardImage = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
_props$size = props.size,
size = _props$size === void 0 ? 'large' : _props$size,
src = props.src,
other = _objectWithoutProperties(props, _excluded4);
const className = cx('manifest-action-card-image', classNameProp, {
[`manifest-action-card-image--${size}`]: size
});
return /*#__PURE__*/jsx(StyledActionCardImage, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: _objectSpread(_objectSpread({}, css), {}, {
backgroundImage: `url(${src})`
}),
size: size
}));
});
ActionCardImage.displayName = 'ActionCardImage';
const StyledAvatarImage = styled('img', {
borderRadius: 'inherit',
boxSizing: 'border-box',
height: '100%',
objectFit: 'cover',
verticalAlign: 'middle',
width: '100%'
});
const StyledAvatarFallback = styled('span', {
alignItems: 'center',
color: 'inherit',
display: 'flex',
fontWeight: '$semibold',
letterSpacing: '$medium',
height: '100%',
justifyContent: 'center',
width: '100%'
});
const StyledAvatar = styled('div', {
alignItems: 'center',
backgroundColor: '$background-secondary',
borderRadius: '$full',
boxSizing: 'border-box',
color: '$text-secondary',
display: 'flex',
justifyContent: 'center',
outline: 'none',
overflow: 'hidden',
verticalAlign: 'middle',
variants: {
size: {
medium: {
minHeight: pxToRem(40),
minWidth: pxToRem(40),
size: pxToRem(40),
[`& ${StyledAvatarFallback}`]: {
fontSize: '$small',
lineHeight: '$medium'
}
},
small: {
minHeight: pxToRem(28),
minWidth: pxToRem(28),
size: pxToRem(28),
[`& ${StyledAvatarFallback}`]: {
fontSize: '$x-small',
lineHeight: pxToRem(14)
}
}
}
},
defaultVariants: {
size: 'medium'
}
});
const Avatar = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
const alt = props.alt,
as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
fallback = props.fallback,
_props$size2 = props.size,
size = _props$size2 === void 0 ? 'medium' : _props$size2,
_props$src = props.src,
src = _props$src === void 0 ? '' : _props$src,
other = _objectWithoutProperties(props, _excluded5);
const _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
mounted = _React$useState2[0],
setMounted = _React$useState2[1];
const _React$useState3 = React.useState('pending'),
_React$useState4 = _slicedToArray(_React$useState3, 2),
status = _React$useState4[0],
setStatus = _React$useState4[1];
const handleError = React.useCallback(() => void setStatus('error'), []);
const handleLoad = React.useCallback(() => void setStatus('loaded'), []);
const classes = cx('manifest-avatar', classNameProp, {
[`manifest-avatar--${size}`]: size,
[`manifest-avatar--${status}`]: status
});
// Reset status to pending if src changes.
React.useEffect(() => {
setStatus('pending');
}, [src]);
// Ensure that the image is only loaded on the client (ssr).
React.useEffect(() => {
setMounted(true);
}, []);
return /*#__PURE__*/jsxs(StyledAvatar, _objectSpread(_objectSpread({
ref: forwardedRef,
as: as,
className: classes,
css: css,
size: size
}, other), {}, {
children: [src && mounted && status !== 'error' && /*#__PURE__*/jsx(StyledAvatarImage, {
alt: alt,
className: "manifest-avatar__image",
src: src,
onError: handleError,
onLoad: handleLoad
}), (!src || status === 'error') && /*#__PURE__*/jsx(StyledAvatarFallback, {
className: "manifest-avatar__fallback",
children: fallback
})]
}));
});
Avatar.displayName = 'Avatar';
const StyledBox = styled('div', {
boxSizing: 'border-box',
margin: 0,
minWidth: 0
});
const Box = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
const as = props.as,
classNameProp = props.className,
css = props.css,
other = _objectWithoutProperties(props, _excluded6);
return /*#__PURE__*/jsx(StyledBox, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: cx('manifest-box', classNameProp),
css: css
}));
});
Box.displayName = 'Box';
const StyledLink = styled('a', {
alignItems: 'baseline',
color: '$text-primary',
display: 'inline-flex',
fontSize: '$medium',
fontWeight: '$semibold',
letterSpacing: '$medium',
lineHeight: '$medium',
textDecoration: 'underline',
width: 'fitContent'
});
const Link = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
other = _objectWithoutProperties(props, _excluded7);
const className = cx('manifest-link', classNameProp);
return /*#__PURE__*/jsx(StyledLink, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: css,
children: children
}));
});
Link.toString = () => '.manifest-link';
Link.displayName = 'Link';
const StyledBreadcrumb = styled('nav', {
overflowX: 'auto'
});
const StyledBreadcrumbList = styled('ol', {
d: 'flex',
listStyle: 'none',
margin: 0,
p: 0
});
const StyledBreadcrumbItem = styled('li', {
d: 'flex',
alignItems: 'center',
color: '$text-secondary',
[`& ${Link}`]: {
typography: '$subtext',
color: 'inherit',
textDecoration: 'none'
},
'&:last-child .manifest-icon': {
display: 'none'
}
});
const Breadcrumb = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
other = _objectWithoutProperties(props, _excluded8);
const className = cx('manifest-breadcrumb', classNameProp);
return /*#__PURE__*/jsx(StyledBreadcrumb, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: css,
children: /*#__PURE__*/jsx(StyledBreadcrumbList, {
className: "manifest-breadcrumb__list",
children: children
})
}));
});
Breadcrumb.displayName = 'Breadcrumb';
/* -------------------------------------------------------------------------------------------------
* BreadcrumbItem
* -----------------------------------------------------------------------------------------------*/
const BreadcrumbItem = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
href = props.href,
other = _objectWithoutProperties(props, _excluded9);
const className = cx('manifest-breadcrumb-item', classNameProp);
return /*#__PURE__*/jsxs(StyledBreadcrumbItem, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: css,
children: [/*#__PURE__*/jsx(Link, {
href: href,
children: children
}), /*#__PURE__*/jsx(ChevronRight, {
"aria-hidden": true,
className: "manifest-breadcrumb-item__icon",
size: "small"
})]
}));
});
BreadcrumbItem.displayName = 'BreadcrumbItem';
/**
* Creates react context with a provider and hook.
*/
function createContext(options = {}) {
const name = options.name;
const Context = /*#__PURE__*/React.createContext(undefined);
Context.displayName = name;
const useContext = () => React.useContext(Context);
return [Context.Provider, useContext, Context];
}
// Will be fixed when this is moved into its own package
// eslint-disable-next-line import/no-unresolved
/**
* Pulled directly from react-aria for composing our own multi-select state for the combobox component.
*
* https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/combobox/src/useComboBoxState.ts
*/
function filterNodes(nodes, inputValue, filter) {
const filteredNode = [];
for (const node of nodes) {
if (node.type === 'section' && node.hasChildNodes) {
const filtered = filterNodes(node.childNodes, inputValue, filter);
if ([...filtered].length > 0) {
filteredNode.push(_objectSpread(_objectSpread({}, node), {}, {
childNodes: filtered
}));
}
} else if (node.type !== 'section' && filter(node.textValue, inputValue)) {
filteredNode.push(_objectSpread({}, node));
}
}
return filteredNode;
}
function filterCollection(collection, inputValue, filter) {
return new ListCollection(filterNodes(collection, inputValue, filter));
}
/**
* Merge all callbacks into a single callback function.
*/
function mergeCallbacks(...fns) {
return (...args) => {
for (const fn of fns) {
if (typeof fn === 'function') {
fn?.(...args);
}
}
};
}
/**
* Merge multiple sets of props together
*
* Adapted from react-aria to support style objects
* https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/utils/src/mergeProps.ts
*/
function mergeProps(...args) {
const result = _objectSpread({}, args[0]);
for (let i = 1; i < args.length; i += 1) {
const props = args[i];
for (const prop in props) {
if (Object.prototype.hasOwnProperty.call(props, prop)) {
const mergedValue = result[prop];
const propValue = props[prop];
// Merge classNames
if (prop === 'className' && typeof mergedValue === 'string' && typeof propValue === 'string') {
result[prop] = clsx(mergedValue, propValue);
// Merge styles
} else if (prop === 'style' && isObject(mergedValue) && isObject(propValue)) {
result[prop] = _objectSpread(_objectSpread({}, mergedValue), propValue);
// Merge event handlers that start with `on`
} else if (typeof mergedValue === 'function' && typeof propValue === 'function' && /^on[A-Z]/.test(prop)) {
result[prop] = mergeCallbacks(mergedValue, propValue);
} else {
result[prop] = propValue ?? mergedValue;
}
}
}
}
return result;
}
function mergeRefs(...refs) {
return value => {
for (const ref of refs) {
if (typeof ref === 'function') {
ref(value);
} else if (typeof ref === 'object' && ref !== null && 'current' in ref) {
ref.current = value;
}
}
};
}
function noop() {}
const reflow = node => node.scrollTop;
const StyledButton$1 = styled('button', {
alignItems: 'center',
appearance: 'none',
backgroundColor: 'transparent',
border: 'none',
borderRadius: '$small',
boxShadow: '$small',
boxSizing: 'border-box',
color: '$text-primary',
cursor: 'pointer',
display: 'inline-flex',
fontFamily: 'inherit',
fontSize: '$small',
fontWeight: '$semibold',
justifyContent: 'center',
letterSpacing: '$medium',
lineHeight: '$small',
outline: 'none',
position: 'relative',
px: pxToRem(12),
userSelect: 'none',
whiteSpace: 'nowrap',
variants: {
hasEndIcon: {
true: {
paddingRight: '$small'
}
},
hasStartIcon: {
true: {
paddingLeft: '$small'
}
},
isDisabled: {
true: {
cursor: 'not-allowed',
pointerEvents: 'none',
opacity: 0.57,
boxShadow: 'none'
}
},
isFocusVisible: {
true: {
'&:after': {
backgroundColor: 'transparent',
border: '2px solid $colors$palette-indigo-200',
// TODO: replace with design token once its defined.s
borderRadius: '4px',
bottom: '-4px',
content: '',
display: 'block',
left: '-4px',
position: 'absolute',
right: '-4px',
top: '-4px'
}
},
false: {}
},
isHovered: {
true: {}
},
isPressed: {
true: {}
},
variant: {
danger: {
backgroundColor: '$palette-red-500',
color: '$palette-white'
},
brand: {
background: '$brand-gradient',
color: '$palette-white'
},
primary: {
backgroundColor: '$primary-default',
color: '$palette-white'
},
secondary: {
backgroundColor: '$palette-white'
},
tertiary: {
backgroundColor: 'transparent',
boxShadow: 'none'
}
},
size: {
medium: {
height: pxToRem(40),
py: '$small',
'.material-icons': {
fontSize: '$x-large'
}
},
small: {
height: pxToRem(32),
py: pxToRem(6),
'.material-icons': {
fontSize: pxToRem(16)
}
}
}
},
compoundVariants: [{
isDisabled: true,
variant: 'secondary',
css: {
borderWidth: '$small',
borderStyle: 'solid',
borderColor: '$border-disabled'
}
}, {
isHovered: true,
variant: 'primary',
css: {
backgroundColor: '$primary-hover'
}
}, {
isHovered: true,
variant: 'secondary',
css: {
backgroundColor: '$palette-grey-100'
}
}, {
isHovered: true,
variant: 'tertiary',
css: {
backgroundColor: '$palette-grey-100'
}
}, {
isHovered: true,
variant: 'brand',
css: {
background: '$brand-hover'
}
}, {
isHovered: true,
variant: 'danger',
css: {
background: 'linear-gradient(0deg, rgba(9, 21, 33, 0.15), rgba(9, 21, 33, 0.15)), $colors$palette-red-500'
}
}, {
isPressed: true,
variant: 'primary',
css: {
backgroundColor: '$primary-active',
boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)'
}
}, {
isPressed: true,
variant: 'secondary',
css: {
backgroundColor: '$palette-grey-300',
boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)'
}
}, {
isPressed: true,
variant: 'tertiary',
css: {
backgroundColor: '$palette-grey-300'
}
}, {
isPressed: true,
variant: 'brand',
css: {
background: '$brand-active'
}
}, {
isPressed: true,
variant: 'danger',
css: {
background: 'linear-gradient(0deg, rgba(9, 21, 33, 0.3), rgba(9, 21, 33, 0.3)), $colors$palette-red-500',
boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)'
}
}],
defaultVariants: {
size: 'medium',
variant: 'primary'
}
});
const StyledButtonIcon = styled('span', {
alignSelf: 'center',
display: 'inline-flex',
flexShrink: 0,
variants: {
placement: {
end: {
marginLeft: '$small',
marginRight: '-$x-small'
},
start: {
marginLeft: '-$x-small',
marginRight: '$small'
}
},
size: {
medium: {
fontSize: '$x-large'
},
small: {
fontSize: pxToRem(18)
}
}
}
});
const StyledButtonGroup = styled('div', {
boxSizing: 'border-box',
display: 'inline-flex',
variants: {
isAttached: {
true: {
'> *:first-of-type:not(:last-of-type)': {
borderBottomRightRadius: 0,
borderTopRightRadius: 0
},
'> *:not(:first-of-type):not(:last-of-type)': {
borderRadius: 0
},
'> *:not(:first-of-type):last-of-type': {
borderBottomLeftRadius: 0,
borderTopLeftRadius: 0
}
},
false: {
'& > *:not(style) ~ *:not(style)': {
marginLeft: '$small'
}
}
}
},
defaultVariants: {
isAttached: false
}
});
const _createContext = createContext({
name: 'ButtonGroupContext'
}),
_createContext2 = _slicedToArray(_createContext, 2),
ButtonGroupProvider = _createContext2[0],
useButtonGroup = _createContext2[1];
/* -------------------------------------------------------------------------------------------------
* Button
* -----------------------------------------------------------------------------------------------*/
const Button = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
const group = useButtonGroup();
const as = props.as,
autoFocus = props.autoFocus,
children = props.children,
classNameProp = props.className,
css = props.css,
_props$isDisabled = props.isDisabled,
isDisabled = _props$isDisabled === void 0 ? group?.isDisabled : _props$isDisabled,
endIcon = props.endIcon,
href = props.href,
onClick = props.onClick,
onPress = props.onPress,
onPressStart = props.onPressStart,
onPressEnd = props.onPressEnd,
onPressChange = props.onPressChange,
onPressUp = props.onPressUp,
rel = props.rel,
_props$size3 = props.size,
size = _props$size3 === void 0 ? group?.size ?? 'medium' : _props$size3,
startIcon = props.startIcon,
_props$variant = props.variant,
variant = _props$variant === void 0 ? group?.variant ?? 'primary' : _props$variant,
target = props.target,
_props$type = props.type,
type = _props$type === void 0 ? 'button' : _props$type,
other = _objectWithoutProperties(props, _excluded10);
const buttonRef = React.useRef(null);
const _useButton = useButton(_objectSpread(_objectSpread({}, other), {}, {
elementType: typeof as === 'string' ? as : 'button',
href,
isDisabled,
onClick,
onPress,
onPressStart,
onPressEnd,
onPressChange,
onPressUp,
rel,
target,
type
}), buttonRef),
buttonProps = _useButton.buttonProps,
isPressed = _useButton.isPressed;
const _useFocusRing = useFocusRing({
autoFocus
}),
isFocusVisible = _useFocusRing.isFocusVisible,
focusProps = _useFocusRing.focusProps;
const _useHover = useHover({
isDisabled
}),
isHovered = _useHover.isHovered,
hoverProps = _useHover.hoverProps;
const classnames = cx('manifest-button', classNameProp, {
'manifest-button--disabled': isDisabled,
[`manifest-button--${size}`]: size,
[`manifest-button--${variant}`]: variant
});
return /*#__PURE__*/jsxs(StyledButton$1, _objectSpread(_objectSpread({}, mergeProps(buttonProps, focusProps, hoverProps, other)), {}, {
ref: mergeRefs(buttonRef, forwardedRef),
as: as,
className: classnames,
css: css,
isDisabled: isDisabled,
isFocusVisible: isFocusVisible,
isHovered: isHovered,
isPressed: isPressed,
size: size,
variant: variant,
children: [startIcon && /*#__PURE__*/jsx(StyledButtonIcon, {
className: cx('manifest-button__icon', 'manifest-button__icon--start'),
placement: "start",
size: size,
children: startIcon
}), children, endIcon && /*#__PURE__*/jsx(StyledButtonIcon, {
className: cx('manifest-button__icon', 'manifest-button__icon--end'),
placement: "end",
size: size,
children: endIcon
})]
}));
});
Button.displayName = 'Button';
/* -------------------------------------------------------------------------------------------------
* ButtonGroup
* -----------------------------------------------------------------------------------------------*/
const ButtonGroup = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
isDisabled = props.isDisabled,
isAttached = props.isAttached,
size = props.size,
variant = props.variant,
other = _objectWithoutProperties(props, _excluded11);
const context = React.useMemo(() => ({
isDisabled,
size,
variant
}), [isDisabled, size, variant]);
const className = cx('manifest-button-group', {
'manifest-button-group--attached': isAttached
}, classNameProp);
return /*#__PURE__*/jsx(StyledButtonGroup, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: css,
isAttached: isAttached,
children: /*#__PURE__*/jsx(ButtonGroupProvider, {
value: context,
children: children
})
}));
});
ButtonGroup.displayName = 'ButtonGroup';
/* -------------------------------------------------------------------------------------------------
* IconButton
* -----------------------------------------------------------------------------------------------*/
const IconButton = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
const classNameProp = props.className,
css = props.css,
_props$size4 = props.size,
size = _props$size4 === void 0 ? 'medium' : _props$size4,
other = _objectWithoutProperties(props, _excluded12);
return /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
className: cx('manifest-icon-button', classNameProp),
css: _objectSpread(_objectSpread({}, css), {}, {
justifyContent: 'center',
px: size === 'small' ? pxToRem(7) : '$small'
}),
size: size
}));
});
IconButton.displayName = 'IconButton';
/**
* Creates a type-safe component with the `as` prop and `React.forwardRef`.
*
* Inspired by ariakit and chakra-ui.
*/
function createComponent(
// The function is being removed in favor of our Polymorphic types.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
component) {
return /*#__PURE__*/React.forwardRef(component);
}
const useStyles$t = css({
alignSelf: 'center',
userSelect: 'none'
});
const Icon = createComponent((props, forwardedRef) => {
const _props$as = props.as,
Comp = _props$as === void 0 ? 'span' : _props$as,
classNameProp = props.className,
css = props.css,
icon = props.icon,
other = _objectWithoutProperties(props, _excluded13);
const _useStyles$t = useStyles$t({
css
}),
className = _useStyles$t.className;
return /*#__PURE__*/jsx(Comp, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
className: cx(className, classNameProp, 'manifest-icon', 'material-icons'),
children: icon
}));
});
Icon.displayName = 'Icon';
const useStyles$s = css({
margin: '0',
variants: {
paragraph: {
true: {
marginBottom: '$medium'
}
},
variant: {
display: {
typography: '$display'
},
heading: {
typography: '$heading'
},
title: {
typography: '$title'
},
subtitle: {
typography: '$subtitle'
},
body: {
typography: '$body'
},
bodyBold: {
typography: '$body-bold'
},
subtext: {
typography: '$subtext'
},
subtextBold: {
typography: '$subtext-bold'
},
caption: {
typography: '$caption'
},
captionBold: {
typography: '$caption-bold'
}
},
color: {
primary: {
color: '$text-primary'
},
secondary: {
color: '$text-secondary'
},
tertiary: {
color: '$text-tertiary'
}
}
},
defaultVariants: {
variant: 'body'
}
});
const Typography = createComponent((props, forwardedRef) => {
const _props$as2 = props.as,
Comp = _props$as2 === void 0 ? 'span' : _props$as2,
classNameProp = props.className,
css = props.css,
_props$variant2 = props.variant,
variant = _props$variant2 === void 0 ? 'body' : _props$variant2,
_props$color = props.color,
color = _props$color === void 0 ? undefined : _props$color,
other = _objectWithoutProperties(props, _excluded14);
const _useStyles$s = useStyles$s({
css,
color,
variant
}),
className = _useStyles$s.className;
const classes = cx(className, classNameProp, {
'manifest-typography': true,
[`manifest-typography--${variant}`]: variant
});
return /*#__PURE__*/jsx(Comp, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
className: classes
}));
});
Typography.displayName = 'Typography';
const useStyles$r = css({
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
margin: 0,
padding: '$small $medium',
flexDirection: 'row',
'.manifest-calendar-header__text': {
color: '$text-secondary',
fontWeight: '$bold'
}
});
/* @private */
function CalendarHeader(props) {
const nextButtonProps = props.nextButtonProps,
prevButtonProps = props.prevButtonProps,
state = props.state;
const _useLocale = useLocale(),
direction = _useLocale.direction;
const currentMonth = state.visibleRange.start;
const dateFormatter = useDateFormatter({
month: 'long',
year: 'numeric',
era: currentMonth.calendar.identifier === 'gregory' && currentMonth.era === 'BC' ? 'short' : undefined,
calendar: currentMonth.calendar.identifier,
timeZone: state.timeZone
});
const _useStyles$r = useStyles$r(),
className = _useStyles$r.className;
return /*#__PURE__*/jsxs("div", {
className: cx(className, 'manifest-calendar-header'),
children: [/*#__PURE__*/jsx(IconButton, _objectSpread(_objectSpread({}, prevButtonProps), {}, {
className: "manifest-calendar-header__previous-button",
size: "small",
variant: "tertiary",
children: /*#__PURE__*/jsx(Icon, {
icon: direction === 'rtl' ? 'chevron_right' : 'chevron_left'
})
})), /*#__PURE__*/jsx(Typography, {
className: "manifest-calendar-header__text",
variant: "subtext",
children: dateFormatter.format(state.visibleRange.start.toDate(state.timeZone))
}), /*#__PURE__*/jsx(IconButton, _objectSpread(_objectSpread({}, nextButtonProps), {}, {
className: "manifest-calendar-header__next-button",
size: "small",
variant: "tertiary",
children: /*#__PURE__*/jsx(Icon, {
icon: direction === 'rtl' ? 'chevron_left' : 'chevron_right'
})
}))]
});
}
CalendarHeader.displayName = 'CalendarHeader';
const calendarCellUnderlineLight = {
'.manifest-calendar-cell__text': {
'&::after': {
content: '""',
backgroundColor: 'white',
borderRadius: '$full',
height: 1,
position: 'absolute',
top: pxToRem(23),
width: 12
}
}
};
const useStyles$q = css({
height: pxToRem(32),
textAlign: 'center',
padding: '$x-small 0',
position: 'relative',
width: pxToRem(44),
'&:last-of-type': {
'.manifest-calendar-cell__button': {
borderTopRightRadius: pxToRem(4),
borderBottomRightRadius: pxToRem(4)
}
},
'&:first-of-type': {
'.manifest-calendar-cell__button': {
borderTopLeftRadius: pxToRem(4),
borderBottomLeftRadius: pxToRem(4)
}
},
'.manifest-calendar-cell__button': {
background: 'transparent',
boxSizing: 'border-box',
cursor: 'pointer',
display: 'block',
height: pxToRem(28),
margin: 0,
outline: 'none',
padding: 0,
position: 'relative',
width: '100%'
},
'.manifest-calendar-cell__text': {
alignItems: 'center',
backgroundColor: 'transparent',
borderRadius: pxToRem(4),
color: '$text-primary',
display: 'flex',
justifyContent: 'center',
left: pxToRem(10),
outline: 'none',
position: 'absolute',
top: 0,
typography: '$caption',
size: pxToRem(28),
whiteSpace: 'nowrap'
},
variants: {
isDisabled: {
true: {
'.manifest-calendar-cell__button': {
cursor: 'default',
pointerEvents: 'none'
},
'.manifest-calendar-cell__text': {
color: '$text-disabled'
}
}
},
isFocusVisible: {
true: {
'.manifest-calendar-cell__text': {
boxShadow: '0 0 0 2px $colors$palette-indigo-200'
}
},
false: {
'.manifest-calendar-cell__text': {
boxShadow: 'none'
}
}
},
isRangeEnd: {
true: {}
},
isRangeSelection: {
true: {}
},
isRangeStart: {
true: {}
},
isSelected: {
true: {}
},
isSelectionEnd: {
true: {}
},
isSelectionStart: {
true: {}
},
isToday: {
true: {
'.manifest-calendar-cell__text': {
'&::after': {
content: '""',
backgroundColor: '$text-primary',
borderRadius: '$full',
height: 1,
position: 'absolute',
top: pxToRem(23),
width: 12
}
}
}
},
isUnavailable: {
true: {
'.manifest-calendar-cell__text': {
color: '$text-disabled'
}
}
}
},
compoundVariants: [{
isSelected: true,
isRangeSelection: false,
css: {
'.manifest-calendar-cell__button': {
'&::after': {
display: 'none'
}
},
'.manifest-calendar-cell__text': {
backgroundColor: '$primary-default',
borderColor: '$palette-indigo-100',
color: '$palette-white'
}
}
}, {
isSelected: true,
isRangeSelection: true,
isSelectionStart: true,
css: {
'.manifest-calendar-cell__button': {
background: 'linear-gradient(to left, $colors$palette-indigo-100 50%, transparent 50%)',
'&::after': {
display: 'none'
}
},
'.manifest-calendar-cell__text': {
backgroundColor: '$primary-default',
borderColor: '$palette-indigo-100',
color: '$text-contrast'
}
}
}, {
isSelected: true,
isRangeSelection: true,
isSelectionEnd: true,
css: {
'.manifest-calendar-cell__button': {
background: 'linear-gradient(to right, $colors$palette-indigo-100 50%, transparent 50%)',
'&::after': {
display: 'none'
}
},
'.manifest-calendar-cell__text': {
backgroundColor: '$primary-default',
borderColor: '$palette-indigo-100',
color: '$palette-white'
}
}
}, {
isSelected: true,
isRangeSelection: true,
isSelectionEnd: true,
isSelectionStart: true,
css: {
'.manifest-calendar-cell__button': {
background: 'transparent',
'&::after': {
display: 'none'
}
},
'.manifest-calendar-cell__text': {
backgroundColor: '$primary-default',
borderColor: '$palette-indigo-100',
color: '$palette-white'
}
}
}, {
isSelected