@audius/harmony 0.5.0 → 0.5.2

package/dist/components/modal/ModalContentPages.js

@@ -0,0 +1,56 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useState, Children } from 'react';
+import { ResizeObserver } from '@juggle/resize-observer';
+import cn from 'classnames';
+import { Transition, animated } from 'react-spring/renderprops.cjs';
+import useMeasure from 'react-use-measure';
+import { ModalContent } from './ModalContent.js';
+import styles from './ModalContentPages.module.css.js';
+
+var animatedAny = animated;
+var INNER_HEIGHT_PADDING = 100;
+var defaultTransitions = {
+    initial: { opacity: 1, transform: 'translate3d(0%, 0, 0)' },
+    enter: { opacity: 1, transform: 'translate3d(0%, 0 ,0)' }
+};
+var getSwipeTransitions = function (direction) {
+    return direction === 'forward'
+        ? __assign(__assign({}, defaultTransitions), { 
+            // Next screen enters from right
+            from: { opacity: 0, transform: 'translate3d(100%, 0, 0)' }, 
+            // Current screen leaves on left
+            leave: { opacity: 0, transform: 'translate3d(-100%, 0, 0)' } }) : __assign(__assign({}, defaultTransitions), { 
+        // Previous screen enters from left
+        from: { opacity: 0, transform: 'translate3d(-100%, 0, 0)' }, 
+        // Current screen leaves on right
+        leave: { opacity: 0, transform: 'translate3d(100%, 0, 0)' } });
+};
+var ModalContentPages = function (_a) {
+    var currentPage = _a.currentPage, width = _a.width, contentClassName = _a.contentClassName, children = _a.children, transitionDirection = _a.transitionDirection, modalContentProps = __rest(_a, ["currentPage", "width", "contentClassName", "children", "transitionDirection"]);
+    var _b = useState(0), lastPage = _b[0], setLastPage = _b[1];
+    var _c = useState(getSwipeTransitions('forward')), transitions = _c[0], setTransitions = _c[1];
+    var _d = useMeasure({
+        offsetSize: true,
+        polyfill: ResizeObserver
+    }), contentRef = _d[0], height = _d[1].height;
+    // A bit of a hack, but instead of resizing the height to the result from
+    // useMeasure, clamp it to the window height minus a padding.
+    // This makes it so that when inside a "Drawer," safe areas are respected.
+    var computedHeight = Math.min(height, window.innerHeight - INNER_HEIGHT_PADDING);
+    if (lastPage !== currentPage) {
+        setTransitions(getSwipeTransitions(transitionDirection !== null && transitionDirection !== void 0 ? transitionDirection : (currentPage > lastPage ? 'forward' : 'back')));
+        setLastPage(currentPage);
+    }
+    var modalContentClassName = modalContentProps.className, otherModalContentProps = __rest(modalContentProps, ["className"]);
+    return (jsx("div", __assign({ className: styles.transitionContainer, style: {
+            width: width ? "".concat(width, "px") : '100%',
+            height: computedHeight ? "".concat(computedHeight, "px") : '100%'
+        } }, { children: jsx(Transition, __assign({ items: currentPage, initial: transitions.initial, from: transitions.from, enter: transitions.enter, leave: transitions.leave, unique: true }, { children: function (item) { return function (style) {
+                var AnimatedDiv = animatedAny.div;
+                return (jsx(AnimatedDiv, __assign({ style: __assign({}, style), className: styles.pageContainer }, { children: jsx(ModalContent, __assign({ className: cn(styles.modalContent, modalContentClassName) }, otherModalContentProps, { children: jsx("div", __assign({ className: cn(styles.nestedModalContent, contentClassName), ref: contentRef }, { children: Children.toArray(children)[item] })) })) })));
+            }; } })) })));
+};
+
+export { ModalContentPages };
+//# sourceMappingURL=ModalContentPages.js.map

package/dist/components/modal/ModalContentPages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContentPages.js","sources":["../../../src/components/modal/ModalContentPages.tsx"],"sourcesContent":["import { Children, ReactNode, useState } from 'react'\n\nimport { ResizeObserver } from '@juggle/resize-observer'\nimport cn from 'classnames'\n// eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web\nimport { animated, Transition } from 'react-spring/renderprops.cjs'\nimport useMeasure from 'react-use-measure'\n\nimport { ModalContent } from './ModalContent'\nimport styles from './ModalContentPages.module.css'\nimport { ModalContentProps } from './types'\nconst animatedAny = animated as any\n\nconst INNER_HEIGHT_PADDING = 100\n\nconst defaultTransitions = {\n  initial: { opacity: 1, transform: 'translate3d(0%, 0, 0)' },\n  enter: { opacity: 1, transform: 'translate3d(0%, 0 ,0)' }\n}\nconst getSwipeTransitions = (direction: 'back' | 'forward') =>\n  direction === 'forward'\n    ? {\n        ...defaultTransitions,\n        // Next screen enters from right\n        from: { opacity: 0, transform: 'translate3d(100%, 0, 0)' },\n        // Current screen leaves on left\n        leave: { opacity: 0, transform: 'translate3d(-100%, 0, 0)' }\n      }\n    : {\n        ...defaultTransitions,\n        // Previous screen enters from left\n        from: { opacity: 0, transform: 'translate3d(-100%, 0, 0)' },\n        // Current screen leaves on right\n        leave: { opacity: 0, transform: 'translate3d(100%, 0, 0)' }\n      }\n\nexport type ModalContentPagesProps = {\n  currentPage: number\n  width?: number\n  contentClassName?: string\n  verticalPadding?: number\n  children: ReactNode | ReactNode[]\n  /** Allows override of transition direction for next page change */\n  transitionDirection?: 'back' | 'forward'\n} & ModalContentProps\n\nexport const ModalContentPages = ({\n  currentPage,\n  width,\n  contentClassName,\n  children,\n  transitionDirection,\n  ...modalContentProps\n}: ModalContentPagesProps) => {\n  const [lastPage, setLastPage] = useState(0)\n  const [transitions, setTransitions] = useState<\n    ReturnType<typeof getSwipeTransitions>\n  >(getSwipeTransitions('forward'))\n  const [contentRef, { height }] = useMeasure({\n    offsetSize: true,\n    polyfill: ResizeObserver\n  })\n\n  // A bit of a hack, but instead of resizing the height to the result from\n  // useMeasure, clamp it to the window height minus a padding.\n  // This makes it so that when inside a \"Drawer,\" safe areas are respected.\n  const computedHeight = Math.min(\n    height,\n    window.innerHeight - INNER_HEIGHT_PADDING\n  )\n\n  if (lastPage !== currentPage) {\n    setTransitions(\n      getSwipeTransitions(\n        transitionDirection ?? (currentPage > lastPage ? 'forward' : 'back')\n      )\n    )\n    setLastPage(currentPage)\n  }\n\n  const { className: modalContentClassName, ...otherModalContentProps } =\n    modalContentProps\n\n  return (\n    <div\n      className={styles.transitionContainer}\n      style={{\n        width: width ? `${width}px` : '100%',\n        height: computedHeight ? `${computedHeight}px` : '100%'\n      }}\n    >\n      <Transition\n        items={currentPage}\n        initial={transitions.initial}\n        from={transitions.from}\n        enter={transitions.enter}\n        leave={transitions.leave}\n        unique={true}\n      >\n        {(item) => (style) => {\n          const AnimatedDiv = animatedAny.div\n          return (\n            <AnimatedDiv style={{ ...style }} className={styles.pageContainer}>\n              <ModalContent\n                className={cn(styles.modalContent, modalContentClassName)}\n                {...otherModalContentProps}\n              >\n                <div\n                  className={cn(styles.nestedModalContent, contentClassName)}\n                  ref={contentRef}\n                >\n                  {Children.toArray(children)[item]}\n                </div>\n              </ModalContent>\n            </AnimatedDiv>\n          )\n        }}\n      </Transition>\n    </div>\n  )\n}\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/modal/ModalContentPages.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"transitionContainer":"ModalContentPages-module_transitionContainer__6-mQB","modalContent":"ModalContentPages-module_modalContent__uM7ZM","nestedModalContent":"ModalContentPages-module_nestedModalContent__-BH-w"};
+
+export { styles as default };
+//# sourceMappingURL=ModalContentPages.module.css.js.map

package/dist/components/modal/ModalContentPages.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContentPages.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/modal/ModalContentText.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+type ModalContentTextProps = ComponentProps<'p'>;
+export declare const ModalContentText: (props: ModalContentTextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ModalContentText.d.ts.map

package/dist/components/modal/ModalContentText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContentText.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalContentText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAMtC,KAAK,qBAAqB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAA;AAEhD,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,qDAG5D,CAAA"}

package/dist/components/modal/ModalContentText.js

@@ -0,0 +1,12 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import cn from 'classnames';
+import styles from './ModalContentText.module.css.js';
+
+var ModalContentText = function (props) {
+    var className = props.className, other = __rest(props, ["className"]);
+    return jsx("p", __assign({ className: cn(styles.root, className) }, other));
+};
+
+export { ModalContentText };
+//# sourceMappingURL=ModalContentText.js.map

package/dist/components/modal/ModalContentText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContentText.js","sources":["../../../src/components/modal/ModalContentText.tsx"],"sourcesContent":["import { ComponentProps } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './ModalContentText.module.css'\n\ntype ModalContentTextProps = ComponentProps<'p'>\n\nexport const ModalContentText = (props: ModalContentTextProps) => {\n  const { className, ...other } = props\n  return <p className={cn(styles.root, className)} {...other} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAQO,IAAM,gBAAgB,GAAG,UAAC,KAA4B,EAAA;IACnD,IAAA,SAAS,GAAe,KAAK,CAApB,SAAA,EAAK,KAAK,GAAA,MAAA,CAAK,KAAK,EAA/B,CAAuB,WAAA,CAAA,CAAF,CAAU;AACrC,IAAA,OAAOA,GAAG,CAAA,GAAA,EAAA,QAAA,CAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAAM,EAAA,KAAK,EAAI,CAAA;AAChE;;;;"}

package/dist/components/modal/ModalContentText.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"root":"ModalContentText-module_root__85J0b"};
+
+export { styles as default };
+//# sourceMappingURL=ModalContentText.module.css.js.map

package/dist/components/modal/ModalContentText.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContentText.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/modal/ModalContext.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface ModalContextValue {
+    titleId?: string;
+    subtitleId?: string;
+    isDoneOpening?: boolean;
+    onClose?: () => void;
+}
+export declare const ModalContext: import("react").Context<ModalContextValue>;
+export {};
+//# sourceMappingURL=ModalContext.d.ts.map

package/dist/components/modal/ModalContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalContext.tsx"],"names":[],"mappings":";AAEA,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,eAAO,MAAM,YAAY,4CAAuC,CAAA"}

package/dist/components/modal/ModalContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+var ModalContext = createContext({});
+
+export { ModalContext };
+//# sourceMappingURL=ModalContext.js.map

package/dist/components/modal/ModalContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.js","sources":["../../../src/components/modal/ModalContext.tsx"],"sourcesContent":["import { createContext } from 'react'\n\ninterface ModalContextValue {\n  titleId?: string\n  subtitleId?: string\n  isDoneOpening?: boolean\n  onClose?: () => void\n}\n\nexport const ModalContext = createContext<ModalContextValue>({})\n"],"names":[],"mappings":";;IASa,YAAY,GAAG,aAAa,CAAoB,EAAE;;;;"}

package/dist/components/modal/ModalFooter.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * Footer component to be used inside modals
+ */
+export declare const ModalFooter: (props: import("../layout/Flex").BaseFlexProps & import("..").BaseBoxProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+//# sourceMappingURL=ModalFooter.d.ts.map

package/dist/components/modal/ModalFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalFooter.tsx"],"names":[],"mappings":";AAMA;;GAEG;AACH,eAAO,MAAM,WAAW,mVAgBvB,CAAA"}

package/dist/components/modal/ModalFooter.js

@@ -0,0 +1,15 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../layout/Flex/Flex.js';
+
+/**
+ * Footer component to be used inside modals
+ */
+var ModalFooter = forwardRef(function ModalFooter(_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (jsx(Flex, __assign({ ref: ref, justifyContent: 'center', alignItems: 'center', p: 'xl', gap: 's', flex: '0 0 auto' }, props, { children: children })));
+});
+
+export { ModalFooter };
+//# sourceMappingURL=ModalFooter.js.map

package/dist/components/modal/ModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.js","sources":["../../../src/components/modal/ModalFooter.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { Flex } from '../layout/Flex'\n\nimport { ModalFooterProps } from './types'\n\n/**\n * Footer component to be used inside modals\n */\nexport const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(\n  function ModalFooter({ children, ...props }, ref) {\n    return (\n      <Flex\n        ref={ref}\n        justifyContent='center'\n        alignItems='center'\n        p='xl'\n        gap='s'\n        flex='0 0 auto'\n        {...props}\n      >\n        {children}\n      </Flex>\n    )\n  }\n)\n"],"names":["_jsx"],"mappings":";;;;;AAMA;;AAEG;AACU,IAAA,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAAC,EAAsB,EAAE,GAAG,EAAA;AAAzB,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAK,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF,CAAA;AACvC,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EACH,GAAG,EAAE,GAAG,EACR,cAAc,EAAC,QAAQ,EACvB,UAAU,EAAC,QAAQ,EACnB,CAAC,EAAC,IAAI,EACN,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,UAAU,IACX,KAAK,EAAA,EAAA,QAAA,EAER,QAAQ,EAAA,CAAA,CACJ,EACR;AACH,CAAC;;;;"}

package/dist/components/modal/ModalHeader.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+/**
+ * Header component to be used inside modals
+ */
+export declare const ModalHeader: (props: import("react").HTMLAttributes<HTMLDivElement> & {
+    dismissButtonClassName?: string | undefined;
+    showDismissButton?: boolean | undefined;
+    onClose?: (() => void) | undefined;
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+/**
+ * Title component to be used inside modal headers
+ */
+export declare const ModalTitle: (props: Omit<import("react").HTMLAttributes<HTMLDivElement>, "title"> & {
+    subtitleClassName?: string | undefined;
+    icon?: import("react").ReactNode;
+    Icon?: import("..").IconComponent | undefined;
+    iconClassName?: string | undefined;
+    title: import("react").ReactNode;
+    titleClassName?: string | undefined;
+    subtitle?: import("react").ReactNode;
+    titleId?: string | undefined;
+    subtitleId?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+//# sourceMappingURL=ModalHeader.d.ts.map

package/dist/components/modal/ModalHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalHeader.tsx"],"names":[],"mappings":";AAWA;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;uJA2CvB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;uJAyCtB,CAAA"}

package/dist/components/modal/ModalHeader.js

@@ -0,0 +1,84 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { forwardRef, useContext, useCallback } from 'react';
+import cn from 'classnames';
+import '@emotion/react';
+import '@emotion/css';
+import { IconClose } from '../../icons/individual/IconClose.js';
+import '../layout/Box/Box.js';
+import '../layout/Flex/Flex.js';
+import '../skeleton/Skeleton.js';
+import '../common/HiddenInput.js';
+import '../radio-group/RadioGroupContext.js';
+import '../text/Text.js';
+import '../input/TextInput/TextInput.js';
+import '../input/TextInput/types.js';
+import '../input/PasswordInput/PasswordInput.js';
+import '../input/TokenAmountInput/TokenAmountInput.js';
+import '../input/TextArea/TextArea.js';
+import '../layout/Paper/Paper.js';
+import '../button/Button/Button.js';
+import '../button/PlainButton/PlainButton.js';
+import '../button/FollowButton/FollowButton.js';
+import { IconButton } from '../button/IconButton/IconButton.js';
+import '../button/UnstyledButton.js';
+import '../button/FilterButton/FilterButton.js';
+import '../button/FilterButton/FilterButtonOption.js';
+import '../button/BaseButton/BaseButton.js';
+import '@react-spring/web';
+import '../text-link/TextLink.js';
+import '../switch/Switch.js';
+import '@juggle/resize-observer';
+import 'react-merge-refs';
+import 'react-use-measure';
+import '../scrollbar/Scrollbar.js';
+import '../popup/Popup.js';
+import '../popup-menu/PopupMenu.js';
+import './Modal.js';
+import { ModalContext } from './ModalContext.js';
+import 'react-spring/renderprops.cjs';
+import './ModalFooter.js';
+import './types.js';
+import 'lodash';
+import 'numeral';
+import '../../contexts/MediaContext.js';
+import 'color';
+import 'lottie-react';
+import '../pill/Pill.js';
+import '../select/Select/Select.js';
+import '../checkbox/Checkbox.js';
+import '../hover-card/HoverCard.js';
+import '../../foundations/color/semantic.js';
+import '../../foundations/color/color.js';
+import '../../foundations/theme/theme.js';
+import '../../hooks/useHotKeys.js';
+import '../internal/MenuItem.js';
+import 'react-dom';
+import styles from './ModalHeader.module.css.js';
+
+/**
+ * Header component to be used inside modals
+ */
+var ModalHeader = forwardRef(function ModalHeader(_a, ref) {
+    var _b;
+    var className = _a.className, onCloseProp = _a.onClose, dismissButtonClassName = _a.dismissButtonClassName, _c = _a.showDismissButton, showDismissButton = _c === void 0 ? true : _c, children = _a.children, props = __rest(_a, ["className", "onClose", "dismissButtonClassName", "showDismissButton", "children"]);
+    var onClose = useContext(ModalContext).onClose;
+    var handleClose = useCallback(function () {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+    }, [onClose, onCloseProp]);
+    return (jsxs("div", __assign({ className: cn(styles.headerContainer, (_b = {}, _b[styles.noDismissButton] = !showDismissButton, _b), className), ref: ref }, props, { children: [showDismissButton ? (jsx(IconButton, { "aria-label": 'dismiss dialog', className: cn(styles.dismissButton, dismissButtonClassName), icon: IconClose, color: 'subdued', size: 's', onClick: handleClose })) : null, children] })));
+});
+/**
+ * Title component to be used inside modal headers
+ */
+var ModalTitle = forwardRef(function ModalTitle(_a, ref) {
+    var subtitleClassName = _a.subtitleClassName, icon = _a.icon, Icon = _a.Icon, iconClassName = _a.iconClassName, title = _a.title, titleClassName = _a.titleClassName, subtitle = _a.subtitle, titleIdProp = _a.titleId, subtitleIdProp = _a.subtitleId, props = __rest(_a, ["subtitleClassName", "icon", "Icon", "iconClassName", "title", "titleClassName", "subtitle", "titleId", "subtitleId"]);
+    var modalContext = useContext(ModalContext);
+    var titleId = titleIdProp || modalContext.titleId;
+    var subtitleId = subtitleIdProp || modalContext.subtitleId;
+    return (jsxs(Fragment, { children: [jsxs("div", __assign({ className: styles.titleContainer }, props, { ref: ref }, { children: [icon == null ? null : (jsx("div", __assign({ className: cn(styles.icon, iconClassName) }, { children: icon }))), Icon ? jsx(Icon, { className: styles.icon }) : null, jsx("h2", __assign({ id: titleId, className: cn(styles.title, titleClassName) }, { children: title }))] })), subtitle == null ? null : (jsx("div", __assign({ className: cn(styles.subtitleContainer, subtitleClassName) }, { children: jsx("h3", __assign({ id: subtitleId, className: styles.subtitle }, { children: subtitle })) })))] }));
+});
+
+export { ModalHeader, ModalTitle };
+//# sourceMappingURL=ModalHeader.js.map

package/dist/components/modal/ModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/modal/ModalHeader.tsx"],"sourcesContent":["import { useContext, forwardRef, useCallback } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconClose } from '../../icons'\nimport { IconButton } from '../button'\n\nimport { ModalContext } from './ModalContext'\nimport styles from './ModalHeader.module.css'\nimport { ModalHeaderProps, ModalTitleProps } from './types'\n\n/**\n * Header component to be used inside modals\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(\n  function ModalHeader(\n    {\n      className,\n      onClose: onCloseProp,\n      dismissButtonClassName,\n      showDismissButton = true,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const { onClose } = useContext(ModalContext)\n\n    const handleClose = useCallback(() => {\n      onClose?.()\n      onCloseProp?.()\n    }, [onClose, onCloseProp])\n\n    return (\n      <div\n        className={cn(\n          styles.headerContainer,\n          { [styles.noDismissButton]: !showDismissButton },\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        {showDismissButton ? (\n          <IconButton\n            aria-label='dismiss dialog'\n            className={cn(styles.dismissButton, dismissButtonClassName)}\n            icon={IconClose}\n            color='subdued'\n            size='s'\n            onClick={handleClose}\n          />\n        ) : null}\n        {children}\n      </div>\n    )\n  }\n)\n\n/**\n * Title component to be used inside modal headers\n */\nexport const ModalTitle = forwardRef<HTMLDivElement, ModalTitleProps>(\n  function ModalTitle(\n    {\n      subtitleClassName,\n      icon,\n      Icon,\n      iconClassName,\n      title,\n      titleClassName,\n      subtitle,\n      titleId: titleIdProp,\n      subtitleId: subtitleIdProp,\n      ...props\n    },\n    ref\n  ) {\n    const modalContext = useContext(ModalContext)\n    const titleId = titleIdProp || modalContext.titleId\n    const subtitleId = subtitleIdProp || modalContext.subtitleId\n\n    return (\n      <>\n        <div className={styles.titleContainer} {...props} ref={ref}>\n          {icon == null ? null : (\n            <div className={cn(styles.icon, iconClassName)}>{icon}</div>\n          )}\n          {Icon ? <Icon className={styles.icon} /> : null}\n          <h2 id={titleId} className={cn(styles.title, titleClassName)}>\n            {title}\n          </h2>\n        </div>\n        {subtitle == null ? null : (\n          <div className={cn(styles.subtitleContainer, subtitleClassName)}>\n            <h3 id={subtitleId} className={styles.subtitle}>\n              {subtitle}\n            </h3>\n          </div>\n        )}\n      </>\n    )\n  }\n)\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA;;AAEG;AACU,IAAA,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EAOC,EACD,GAAG,EAAA;;IAPD,IAAA,SAAS,eAAA,EACA,WAAW,aAAA,EACpB,sBAAsB,GAAA,EAAA,CAAA,sBAAA,EACtB,EAAwB,GAAA,EAAA,CAAA,iBAAA,EAAxB,iBAAiB,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,IAAI,KAAA,EACxB,QAAQ,cAAA,EACL,KAAK,GANV,MAAA,CAAA,EAAA,EAAA,CAAA,WAAA,EAAA,SAAA,EAAA,wBAAA,EAAA,mBAAA,EAAA,UAAA,CAOC,CADS,CAAA;AAIF,IAAA,IAAA,OAAO,GAAK,UAAU,CAAC,YAAY,CAAC,QAA7B,CAA6B;IAE5C,IAAM,WAAW,GAAG,WAAW,CAAC,YAAA;AAC9B,QAAA,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,EAAI,CAAA;AACX,QAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,EAAI,CAAA;AACjB,KAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAA;AAE1B,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,eAAe,YACpB,EAAC,CAAA,MAAM,CAAC,eAAe,IAAG,CAAC,iBAAiB,EAC9C,EAAA,GAAA,SAAS,CACV,EACD,GAAG,EAAE,GAAG,EACJ,EAAA,KAAK,EAER,EAAA,QAAA,EAAA,CAAA,iBAAiB,IAChBC,GAAA,CAAC,UAAU,EACE,EAAA,YAAA,EAAA,gBAAgB,EAC3B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,sBAAsB,CAAC,EAC3D,IAAI,EAAE,SAAS,EACf,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,WAAW,EACpB,CAAA,IACA,IAAI,EACP,QAAQ,CAAA,EAAA,CAAA,CACL,EACP;AACH,CAAC,EACF;AAED;;AAEG;AACU,IAAA,UAAU,GAAG,UAAU,CAClC,SAAS,UAAU,CACjB,EAWC,EACD,GAAG,EAAA;AAXD,IAAA,IAAA,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EACjB,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,QAAQ,GAAA,EAAA,CAAA,QAAA,EACC,WAAW,GAAA,EAAA,CAAA,OAAA,EACR,cAAc,GAAA,EAAA,CAAA,UAAA,EACvB,KAAK,GAAA,MAAA,CAAA,EAAA,EAVV,sHAWC,CADS,CAAA;AAIV,IAAA,IAAM,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;AAC7C,IAAA,IAAM,OAAO,GAAG,WAAW,IAAI,YAAY,CAAC,OAAO,CAAA;AACnD,IAAA,IAAM,UAAU,GAAG,cAAc,IAAI,YAAY,CAAC,UAAU,CAAA;IAE5D,QACED,IACE,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAF,IAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,EAAM,KAAK,EAAA,EAAE,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EAAA,CACvD,IAAI,IAAI,IAAI,GAAG,IAAI,IAClBC,GAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,EAAA,EAAA,EAAA,QAAA,EAAG,IAAI,EAAA,CAAA,CAAO,CAC7D,EACA,IAAI,GAAGA,GAAC,CAAA,IAAI,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EAAI,CAAA,GAAG,IAAI,EAC/CA,qBAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,EACzD,EAAA,EAAA,QAAA,EAAA,KAAK,EACH,CAAA,CAAA,CAAA,EAAA,CAAA,CACD,EACL,QAAQ,IAAI,IAAI,GAAG,IAAI,IACtBA,sBAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,EAC7D,EAAA,EAAA,QAAA,EAAAA,GAAA,CAAA,IAAA,EAAA,QAAA,CAAA,EAAI,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA,EAAA,EAAA,QAAA,EAC3C,QAAQ,EAAA,CAAA,CACN,EACD,CAAA,CAAA,CACP,CACA,EAAA,CAAA,EACJ;AACH,CAAC;;;;"}

package/dist/components/modal/ModalHeader.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"modalContentContainer":"ModalHeader-module_modalContentContainer__WEOY8","headerContainer":"ModalHeader-module_headerContainer__9IIIt","dismissButton":"ModalHeader-module_dismissButton__90kKN","titleContainer":"ModalHeader-module_titleContainer__SKeCw","noDismissButton":"ModalHeader-module_noDismissButton__Ez3S-","title":"ModalHeader-module_title__L8pJa","subtitleContainer":"ModalHeader-module_subtitleContainer__DnxPs","subtitle":"ModalHeader-module_subtitle__oICwK","icon":"ModalHeader-module_icon__3f1fi"};
+
+export { styles as default };
+//# sourceMappingURL=ModalHeader.module.css.js.map

package/dist/components/modal/ModalHeader.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/modal/findAncestor.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Legacy browser support for `Element.closest`
+ * @param el
+ * @param selector query selector
+ */
+export declare const findAncestor: (el: Element | null, selector: string) => Element | null;
+//# sourceMappingURL=findAncestor.d.ts.map

package/dist/components/modal/findAncestor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"findAncestor.d.ts","sourceRoot":"","sources":["../../../src/components/modal/findAncestor.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,YAAY,OAAQ,OAAO,GAAG,IAAI,YAAY,MAAM,mBAWhE,CAAA"}

package/dist/components/modal/findAncestor.js

@@ -0,0 +1,20 @@
+/**
+ * Legacy browser support for `Element.closest`
+ * @param el
+ * @param selector query selector
+ */
+var findAncestor = function (el, selector) {
+    var _a;
+    if (el !== null && el.closest) {
+        return el.closest(selector);
+    }
+    // Fall back to just looping back through parents
+    while ((el = (_a = el === null || el === void 0 ? void 0 : el.parentElement) !== null && _a !== void 0 ? _a : null) &&
+        // @ts-ignore
+        !(el.matches || el.matchesSelector).call(el, selector))
+        ;
+    return el;
+};
+
+export { findAncestor };
+//# sourceMappingURL=findAncestor.js.map

package/dist/components/modal/findAncestor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"findAncestor.js","sources":["../../../src/components/modal/findAncestor.ts"],"sourcesContent":["/**\n * Legacy browser support for `Element.closest`\n * @param el\n * @param selector query selector\n */\nexport const findAncestor = (el: Element | null, selector: string) => {\n  if (el !== null && el.closest) {\n    return el.closest(selector)\n  }\n  // Fall back to just looping back through parents\n  while (\n    (el = el?.parentElement ?? null) &&\n    // @ts-ignore\n    !(el.matches || el.matchesSelector).call(el, selector)\n  );\n  return el\n}\n"],"names":[],"mappings":"AAAA;;;;AAIG;AACU,IAAA,YAAY,GAAG,UAAC,EAAkB,EAAE,QAAgB,EAAA;;AAC/D,IAAA,IAAI,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE;AAC7B,QAAA,OAAO,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;AAC5B,KAAA;;AAED,IAAA,OACE,CAAC,EAAE,GAAG,CAAA,EAAA,GAAA,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAF,EAAE,CAAE,aAAa,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,IAAI;;AAE/B,QAAA,CAAC,CAAC,EAAE,CAAC,OAAO,IAAI,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC;QACvD,CAAC;AACF,IAAA,OAAO,EAAE,CAAA;AACX;;;;"}

package/dist/components/modal/hooks.d.ts

@@ -0,0 +1,8 @@
+export declare const setOverflowHidden: () => void;
+export declare const removeOverflowHidden: () => void;
+export declare const setModalRootTop: () => void;
+export declare const useModalScrollCount: () => {
+    incrementScrollCount: () => void;
+    decrementScrollCount: () => void;
+};
+//# sourceMappingURL=hooks.d.ts.map

package/dist/components/modal/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/modal/hooks.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,YAE7B,CAAA;AAED,eAAO,MAAM,oBAAoB,YAEhC,CAAA;AAED,eAAO,MAAM,eAAe,YAM3B,CAAA;AAID,eAAO,MAAM,mBAAmB;;;CAgD/B,CAAA"}

package/dist/components/modal/hooks.js

@@ -0,0 +1,66 @@
+import { useState, useEffect, useCallback } from 'react';
+
+var setOverflowHidden = function () {
+    document.body.setAttribute('style', 'overflow:hidden;');
+};
+var removeOverflowHidden = function () {
+    document.body.setAttribute('style', '');
+};
+var setModalRootTop = function () {
+    var root = document.getElementById('modalRootContainer');
+    var scrollY = typeof window !== 'undefined' ? window.scrollY : 0;
+    if (root) {
+        root.setAttribute('style', "top: ".concat(scrollY, "px"));
+    }
+};
+var modalCount = 0;
+var useModalScrollCount = function () {
+    // Keep a state toggle to trigger recomputations of the effect
+    var _a = useState(false), toggle = _a[0], setToggle = _a[1];
+    var _b = useState(false), isOverflowHidden = _b[0], setIsOverflowHidden = _b[1];
+    useEffect(function () {
+        if (!isOverflowHidden && modalCount > 0) {
+            setIsOverflowHidden(true);
+            setOverflowHidden();
+            setModalRootTop();
+        }
+        else if (isOverflowHidden && modalCount === 0) {
+            setIsOverflowHidden(false);
+            removeOverflowHidden();
+        }
+        return function () {
+            /**
+             * On cleanup of the `useScrollLock` hook, if the modal is open,
+             * the count is decremented. Because the cleanup of this method
+             * depends on the cleanup of `useScrollLock`, setImmediate is
+             * used to push this check to the end of the event loop.
+             * This guarantees that the getCount call will return
+             * an updated number. Else, getCount() may non-deterministically
+             * return 0 or 1 on cleanup of a final modal.
+             * NOTE: This should only be triggered on un-mount when not closed
+             */
+            setImmediate(function () {
+                if (isOverflowHidden && modalCount === 0) {
+                    removeOverflowHidden();
+                }
+            });
+        };
+    }, [isOverflowHidden, toggle]);
+    var incrementScrollCount = useCallback(function () {
+        modalCount = modalCount + 1;
+        setToggle(function (toggle) { return !toggle; });
+    }, [setToggle]);
+    var decrementScrollCount = useCallback(function () {
+        // Though we should in theory never be decrementing past zero, getting into
+        // that state would be bad for us, so guard against it defensively
+        modalCount = Math.max(0, modalCount - 1);
+        setToggle(function (toggle) { return !toggle; });
+    }, [setToggle]);
+    return {
+        incrementScrollCount: incrementScrollCount,
+        decrementScrollCount: decrementScrollCount
+    };
+};
+
+export { removeOverflowHidden, setModalRootTop, setOverflowHidden, useModalScrollCount };
+//# sourceMappingURL=hooks.js.map

package/dist/components/modal/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sources":["../../../src/components/modal/hooks.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\n\nexport const setOverflowHidden = () => {\n  document.body.setAttribute('style', 'overflow:hidden;')\n}\n\nexport const removeOverflowHidden = () => {\n  document.body.setAttribute('style', '')\n}\n\nexport const setModalRootTop = () => {\n  const root = document.getElementById('modalRootContainer')\n  const scrollY = typeof window !== 'undefined' ? window.scrollY : 0\n  if (root) {\n    root.setAttribute('style', `top: ${scrollY}px`)\n  }\n}\n\nlet modalCount = 0\n\nexport const useModalScrollCount = () => {\n  // Keep a state toggle to trigger recomputations of the effect\n  const [toggle, setToggle] = useState(false)\n  const [isOverflowHidden, setIsOverflowHidden] = useState(false)\n\n  useEffect(() => {\n    if (!isOverflowHidden && modalCount > 0) {\n      setIsOverflowHidden(true)\n      setOverflowHidden()\n      setModalRootTop()\n    } else if (isOverflowHidden && modalCount === 0) {\n      setIsOverflowHidden(false)\n      removeOverflowHidden()\n    }\n    return () => {\n      /**\n       * On cleanup of the `useScrollLock` hook, if the modal is open,\n       * the count is decremented. Because the cleanup of this method\n       * depends on the cleanup of `useScrollLock`, setImmediate is\n       * used to push this check to the end of the event loop.\n       * This guarantees that the getCount call will return\n       * an updated number. Else, getCount() may non-deterministically\n       * return 0 or 1 on cleanup of a final modal.\n       * NOTE: This should only be triggered on un-mount when not closed\n       */\n      setImmediate(() => {\n        if (isOverflowHidden && modalCount === 0) {\n          removeOverflowHidden()\n        }\n      })\n    }\n  }, [isOverflowHidden, toggle])\n\n  const incrementScrollCount = useCallback(() => {\n    modalCount = modalCount + 1\n    setToggle((toggle) => !toggle)\n  }, [setToggle])\n  const decrementScrollCount = useCallback(() => {\n    // Though we should in theory never be decrementing past zero, getting into\n    // that state would be bad for us, so guard against it defensively\n    modalCount = Math.max(0, modalCount - 1)\n    setToggle((toggle) => !toggle)\n  }, [setToggle])\n\n  return {\n    incrementScrollCount,\n    decrementScrollCount\n  }\n}\n"],"names":[],"mappings":";;AAEa,IAAA,iBAAiB,GAAG,YAAA;IAC/B,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAA;AACzD,EAAC;AAEY,IAAA,oBAAoB,GAAG,YAAA;IAClC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;AACzC,EAAC;AAEY,IAAA,eAAe,GAAG,YAAA;IAC7B,IAAM,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAA;AAC1D,IAAA,IAAM,OAAO,GAAG,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,OAAO,GAAG,CAAC,CAAA;AAClE,IAAA,IAAI,IAAI,EAAE;QACR,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,OAAQ,CAAA,MAAA,CAAA,OAAO,EAAI,IAAA,CAAA,CAAC,CAAA;AAChD,KAAA;AACH,EAAC;AAED,IAAI,UAAU,GAAG,CAAC,CAAA;AAEL,IAAA,mBAAmB,GAAG,YAAA;;IAE3B,IAAA,EAAA,GAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,SAAS,GAAA,EAAA,CAAA,CAAA,CAAmB,CAAA;IACrC,IAAA,EAAA,GAA0C,QAAQ,CAAC,KAAK,CAAC,EAAxD,gBAAgB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,mBAAmB,GAAA,EAAA,CAAA,CAAA,CAAmB,CAAA;AAE/D,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAI,CAAC,gBAAgB,IAAI,UAAU,GAAG,CAAC,EAAE;YACvC,mBAAmB,CAAC,IAAI,CAAC,CAAA;AACzB,YAAA,iBAAiB,EAAE,CAAA;AACnB,YAAA,eAAe,EAAE,CAAA;AAClB,SAAA;AAAM,aAAA,IAAI,gBAAgB,IAAI,UAAU,KAAK,CAAC,EAAE;YAC/C,mBAAmB,CAAC,KAAK,CAAC,CAAA;AAC1B,YAAA,oBAAoB,EAAE,CAAA;AACvB,SAAA;QACD,OAAO,YAAA;AACL;;;;;;;;;AASG;AACH,YAAA,YAAY,CAAC,YAAA;AACX,gBAAA,IAAI,gBAAgB,IAAI,UAAU,KAAK,CAAC,EAAE;AACxC,oBAAA,oBAAoB,EAAE,CAAA;AACvB,iBAAA;AACH,aAAC,CAAC,CAAA;AACJ,SAAC,CAAA;AACH,KAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC,CAAA;IAE9B,IAAM,oBAAoB,GAAG,WAAW,CAAC,YAAA;AACvC,QAAA,UAAU,GAAG,UAAU,GAAG,CAAC,CAAA;QAC3B,SAAS,CAAC,UAAC,MAAM,EAAK,EAAA,OAAA,CAAC,MAAM,CAAA,EAAA,CAAC,CAAA;AAChC,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IACf,IAAM,oBAAoB,GAAG,WAAW,CAAC,YAAA;;;QAGvC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,CAAA;QACxC,SAAS,CAAC,UAAC,MAAM,EAAK,EAAA,OAAA,CAAC,MAAM,CAAA,EAAA,CAAC,CAAA;AAChC,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO;AACL,QAAA,oBAAoB,EAAA,oBAAA;AACpB,QAAA,oBAAoB,EAAA,oBAAA;KACrB,CAAA;AACH;;;;"}

package/dist/components/modal/index.d.ts

@@ -0,0 +1,8 @@
+export { Modal } from './Modal';
+export { ModalContent } from './ModalContent';
+export { ModalContentPages } from './ModalContentPages';
+export { ModalContentText } from './ModalContentText';
+export { ModalHeader, ModalTitle } from './ModalHeader';
+export { ModalFooter } from './ModalFooter';
+export { type ModalProps, Anchor, type ModalContentProps, type ModalHeaderProps, type ModalTitleProps, type ModalFooterProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EACL,KAAK,UAAU,EACf,MAAM,EACN,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACtB,MAAM,SAAS,CAAA"}

package/dist/components/modal/types.d.ts

@@ -0,0 +1,131 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { IconComponent } from '../icon';
+import { FlexProps } from '../layout/Flex';
+import { ScrollbarProps } from '../scrollbar';
+export declare enum Anchor {
+    CENTER = "CENTER",
+    TOP = "TOP",
+    BOTTOM = "BOTTOM"
+}
+export type ModalProps = {
+    /**
+     * Optional unique key to assign to the modal.
+     * If not provided, it is auto-generated.
+     */
+    modalKey?: string;
+    /**
+     * Modal contents
+     */
+    children: ReactNode;
+    /**
+     * Callback fired when the modal is closed
+     * Should set isOpen accordingly
+     */
+    onClose: () => void;
+    /**
+     * Callback fired when the modal children are removed from the dom.
+     */
+    onClosed?: () => void;
+    /**
+     * Whether or not the modal is open
+     */
+    isOpen: boolean;
+    /**
+     * @deprecated in favor of composability - use ModalHeader sub-component instead.
+     */
+    showTitleHeader?: boolean;
+    /**
+     * @deprecated in favor of composability - use ModalHeader sub-component instead.
+     */
+    title?: ReactNode;
+    /**
+     * @deprecated in favor of composability - use ModalHeader sub-component instead.
+     */
+    subtitle?: string;
+    /**
+     * Whether to dismiss on a click outside the modal
+     */
+    dismissOnClickOutside?: boolean;
+    /**
+     * @deprecated in favor of composability - use ModalHeader sub-component instead.
+     */
+    showDismissButton?: boolean;
+    /**
+     * Manually set z-index.
+     *
+     * By default, the z-index is 10000 and the modal background shadow is
+     * set to z-index - 1 so that the modal appears on top of the shadow.
+     *
+     * If you would like to nest modals, it's important to increase the z-index by
+     * 2 for every modal so that the parent modal lives behind the child modal's shadow.
+     */
+    zIndex?: number;
+    /** @deprecated */
+    allowScroll?: boolean;
+    wrapperClassName?: string;
+    /**
+     *  Set max-width on bodyClass to set the modal width
+     */
+    bodyClassName?: string;
+    /**
+     * @deprecated in favor of composability - use ModalHeader sub-component instead.
+     */
+    titleClassName?: string;
+    /**
+     * @deprecated in favor of composability - use ModalHeader sub-component instead.
+     */
+    subtitleClassName?: string;
+    /**
+     * @deprecated in favor of composability - use ModalHeader sub-component instead.
+     */
+    headerContainerClassName?: string;
+    anchor?: Anchor;
+    verticalAnchorOffset?: number;
+    /**
+     * Horizontal padding between modal edges and viewport edge
+     */
+    horizontalPadding?: number;
+    /**
+     * @deprecated in favor of composability - use ModalContent sub-component instead
+     */
+    contentHorizontalPadding?: number;
+    /**
+     * Optional aria description for the dialog.
+     * If not provided, it is auto-generated.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Optional aria label for the dialog.
+     * If not provided, it is auto-generated.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * If provided, conform to standard modal widths
+     * (only small currently implemented)
+     */
+    size?: 'small' | 'medium' | 'large';
+    className?: string;
+};
+export type ModalContentProps = ScrollbarProps;
+export type ModalHeaderProps = HTMLAttributes<HTMLDivElement> & {
+    dismissButtonClassName?: string;
+    showDismissButton?: boolean;
+    onClose?: () => void;
+    children: ReactNode;
+};
+export type ModalTitleProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    subtitleClassName?: string;
+    /**
+     * @deprecated use Icon prop instead
+     */
+    icon?: ReactNode;
+    Icon?: IconComponent;
+    iconClassName?: string;
+    title: ReactNode;
+    titleClassName?: string;
+    subtitle?: ReactNode;
+    titleId?: string;
+    subtitleId?: string;
+};
+export type ModalFooterProps = FlexProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/modal/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,oBAAY,MAAM;IAChB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IAEnB;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAErB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAA;IAEf;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAE/B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,kBAAkB;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IAIrB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAA;IAEjC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAE7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAA;IAEjC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAE3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAA;AAE9C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC9D,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IAC5E,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,SAAS,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAA"}

package/dist/components/modal/types.js

@@ -0,0 +1,9 @@
+var Anchor;
+(function (Anchor) {
+    Anchor["CENTER"] = "CENTER";
+    Anchor["TOP"] = "TOP";
+    Anchor["BOTTOM"] = "BOTTOM";
+})(Anchor || (Anchor = {}));
+
+export { Anchor };
+//# sourceMappingURL=types.js.map