@xanui/ui 1.2.4 → 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/Alert/index.cjs.map +1 -1
  2. package/Alert/index.d.ts +2 -2
  3. package/Alert/index.js.map +1 -1
  4. package/Button/index.cjs +2 -2
  5. package/Button/index.cjs.map +1 -1
  6. package/Button/index.js +2 -2
  7. package/Button/index.js.map +1 -1
  8. package/Menu/index.cjs +33 -7
  9. package/Menu/index.cjs.map +1 -1
  10. package/Menu/index.js +33 -7
  11. package/Menu/index.js.map +1 -1
  12. package/Portal/index.cjs +1 -1
  13. package/Portal/index.cjs.map +1 -1
  14. package/Portal/index.js +1 -1
  15. package/Portal/index.js.map +1 -1
  16. package/package.json +3 -4
package/Alert/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n title?: useBreakpointPropsType<string | ReactElement>;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n let [{\n title,\n variant,\n icon,\n color,\n direction,\n slotProps,\n onClose,\n ..._props\n }] = useInterface<any>(\"Alert\", rest, {\n variant: \"fill\"\n })\n color ??= \"default\"\n direction ??= \"row\"\n\n const _p: any = {}\n if (title) _p.title = title\n if (variant) _p.variant = variant\n if (icon) _p.icon = icon\n if (color) _p.color = color\n if (direction) _p.direction = direction\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n variant = p.variant\n icon = p.icon\n color = p.color\n direction = p.direction\n\n let isRow = direction === 'row'\n\n\n const template = useColorTemplate(color, variant)\n\n let iconsx = {\n fontSize: isRow ? 22 : 40,\n color: color === 'default' ? \"text.primary\" : template.primary.color\n }\n\n const icons: any = {\n \"info\": <InfoIcon sx={iconsx} />,\n \"warning\": <WarningIcon sx={iconsx} />,\n \"success\": <SuccessIcon sx={iconsx} />,\n \"danger\": <ErrorIcon sx={iconsx} />\n }\n\n let _icon = icons[icon] || icons[color]\n\n return (\n <Tag\n {..._props}\n baseClass=\"alert\"\n sxr={{\n justifyContent: \"flex-start\",\n position: \"relative\",\n radius: 1,\n px: isRow ? (_icon ? .5 : 2) : 3,\n py: isRow ? .5 : 3,\n flexDirection: \"column\",\n display: 'flex',\n ..._props?.sx\n }}\n {...template.primary}\n >\n {\n onClose && <IconButton\n color={color}\n variant={variant === 'fill' ? \"fill\" : \"text\"}\n size={25}\n sx={{\n position: \"absolute\",\n top: 5,\n right: 5\n }}\n onClick={onClose}\n className=\"alert-close-button\"\n >\n <IconClose fontSize={18} />\n </IconButton>\n }\n <Tag\n sx={{\n display: \"flex\",\n gap: 1,\n flexDirection: direction,\n alignItems: isRow ? \"flex-start\" : \"center\"\n }}\n baseClass=\"alert-container\"\n >\n {\n _icon && <Tag\n baseClass=\"alert-icon\"\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n p: isRow ? .5 : 0,\n \"& svg\": {\n color: template.primary.color\n }\n }}\n >\n {_icon}\n </Tag>\n }\n <Tag\n baseClass=\"alert-content\"\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n flex: 1,\n color: template.primary.color,\n textAlign: isRow ? \"left\" : \"center\",\n gap: isRow ? 0 : 1,\n width: \"100%\"\n }}\n >\n {title && <>\n {\n isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n className=\"alert-titles\"\n variant=\"text\"\n sx={{\n fontWeight: 500,\n color: template.primary.color\n }}\n >{title}</Text>\n }\n </>}\n <Tag\n sxr={{\n font: \"button\",\n }}\n >\n {children}\n </Tag>\n </Tag>\n </Tag>\n </Tag>\n )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n open: boolean;\n loading: boolean;\n content: string | ReactElement,\n size?: \"small\" | \"medium\" | \"large\" | number;\n closeButton?: boolean;\n clickOutsideToClose?: boolean;\n okButtonText?: string;\n cancelButtonText?: string;\n hideOkButton?: boolean;\n hideCancelButton?: boolean;\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n variant?: \"text\" | \"fill\"\n onConfirm?: () => Promise<void> | void;\n onCancel?: () => Promise<void> | void;\n transition?: UseTransitionVariantTypes;\n blurMode?: ModalProps['blurMode'];\n slotProps?: {\n modal?: Omit<ModalProps, 'open' | \"children\">;\n okButton?: Omit<ButtonProps, \"children\">;\n closeButton?: Omit<ButtonProps, \"children\">;\n }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n let {\n open,\n loading,\n content,\n size,\n color,\n direction,\n variant,\n closeButton,\n clickOutsideToClose,\n okButtonText,\n cancelButtonText,\n hideOkButton,\n hideCancelButton,\n buttonPlacement,\n onConfirm,\n onCancel,\n transition,\n blurMode,\n slotProps,\n ...rest\n } = props\n\n hideOkButton ??= false\n hideCancelButton ??= false\n\n size ??= \"small\"\n color ??= 'default'\n variant ??= \"text\"\n direction ??= \"column\"\n buttonPlacement ??= \"end\"\n let sx: any = {};\n\n switch (buttonPlacement) {\n case \"start\":\n sx.justifyContent = 'flex-start'\n break;\n case \"end\":\n sx.justifyContent = 'flex-end'\n break;\n case \"between\":\n sx.justifyContent = 'space-between'\n break;\n case \"full\":\n sx = {\n \"& button\": {\n flex: 1\n }\n }\n break;\n }\n\n let sizes: any = {\n small: 320,\n medium: 400,\n large: 600\n }\n\n let okcolor = color\n let closecolor = color\n if (color === 'default') {\n okcolor = 'brand'\n closecolor = 'default'\n variant = 'text'\n } else {\n if (variant === 'fill') {\n okcolor = 'default'\n closecolor = 'default'\n } else {\n okcolor = color\n closecolor = 'default'\n }\n }\n\n return (<Modal\n open={open}\n {...slotProps?.modal}\n size={sizes[size] || size}\n blur={40}\n blurMode={blurMode || \"transparent\"}\n transition={transition || \"zoom\"}\n onClickOutside={async () => {\n if (clickOutsideToClose && !loading) {\n onCancel && await onCancel()\n }\n }}\n >\n <Alert\n direction={direction}\n sx={{\n px: 2,\n py: 1,\n pt: direction === 'row' ? 1 : 2\n }}\n color={color}\n variant={variant}\n onClose={closeButton ? close : undefined}\n {...rest}\n >\n {content}\n <Tag\n sxr={{\n display: \"flex\",\n gap: 1,\n pt: 4,\n flexDirection: \"row\",\n ...sx,\n }}\n >\n {!hideCancelButton && <Button\n disabled={loading}\n color={closecolor}\n variant=\"fill\"\n {...slotProps?.closeButton}\n onClick={async () => {\n onCancel && await onCancel()\n }}\n >{cancelButtonText || \"Close\"}</Button>}\n <Button\n loading={loading}\n color={okcolor}\n variant=\"fill\"\n {...slotProps?.okButton}\n\n onClick={async () => {\n onConfirm && await onConfirm()\n }}\n >{okButtonText || \"OK\"}</Button>\n </Tag>\n </Alert>\n </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n const Inst = (_props: any) => <ConfirmAlert {..._props} />\n const confirm = Renderar.render(Inst as any, {\n ...props,\n open: true,\n loading: false,\n onConfirm: async () => {\n if (onConfirm) {\n confirm.updateProps({ loading: true })\n if (onConfirm) await onConfirm()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n onCancel: async () => {\n if (onCancel) {\n confirm.updateProps({ loading: true })\n await onCancel()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n slotProps: {\n ...props.slotProps,\n modal: {\n ...props.slotProps?.modal,\n onClosed: () => {\n confirm.unrender()\n if (props?.slotProps?.modal?.onClosed) {\n props.slotProps?.modal?.onClosed()\n }\n },\n }\n },\n })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, TransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n title?: useBreakpointPropsType<string | ReactElement>;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n let [{\n title,\n variant,\n icon,\n color,\n direction,\n slotProps,\n onClose,\n ..._props\n }] = useInterface<any>(\"Alert\", rest, {\n variant: \"fill\"\n })\n color ??= \"default\"\n direction ??= \"row\"\n\n const _p: any = {}\n if (title) _p.title = title\n if (variant) _p.variant = variant\n if (icon) _p.icon = icon\n if (color) _p.color = color\n if (direction) _p.direction = direction\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n variant = p.variant\n icon = p.icon\n color = p.color\n direction = p.direction\n\n let isRow = direction === 'row'\n\n\n const template = useColorTemplate(color, variant)\n\n let iconsx = {\n fontSize: isRow ? 22 : 40,\n color: color === 'default' ? \"text.primary\" : template.primary.color\n }\n\n const icons: any = {\n \"info\": <InfoIcon sx={iconsx} />,\n \"warning\": <WarningIcon sx={iconsx} />,\n \"success\": <SuccessIcon sx={iconsx} />,\n \"danger\": <ErrorIcon sx={iconsx} />\n }\n\n let _icon = icons[icon] || icons[color]\n\n return (\n <Tag\n {..._props}\n baseClass=\"alert\"\n sxr={{\n justifyContent: \"flex-start\",\n position: \"relative\",\n radius: 1,\n px: isRow ? (_icon ? .5 : 2) : 3,\n py: isRow ? .5 : 3,\n flexDirection: \"column\",\n display: 'flex',\n ..._props?.sx\n }}\n {...template.primary}\n >\n {\n onClose && <IconButton\n color={color}\n variant={variant === 'fill' ? \"fill\" : \"text\"}\n size={25}\n sx={{\n position: \"absolute\",\n top: 5,\n right: 5\n }}\n onClick={onClose}\n className=\"alert-close-button\"\n >\n <IconClose fontSize={18} />\n </IconButton>\n }\n <Tag\n sx={{\n display: \"flex\",\n gap: 1,\n flexDirection: direction,\n alignItems: isRow ? \"flex-start\" : \"center\"\n }}\n baseClass=\"alert-container\"\n >\n {\n _icon && <Tag\n baseClass=\"alert-icon\"\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n p: isRow ? .5 : 0,\n \"& svg\": {\n color: template.primary.color\n }\n }}\n >\n {_icon}\n </Tag>\n }\n <Tag\n baseClass=\"alert-content\"\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n flex: 1,\n color: template.primary.color,\n textAlign: isRow ? \"left\" : \"center\",\n gap: isRow ? 0 : 1,\n width: \"100%\"\n }}\n >\n {title && <>\n {\n isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n className=\"alert-titles\"\n variant=\"text\"\n sx={{\n fontWeight: 500,\n color: template.primary.color\n }}\n >{title}</Text>\n }\n </>}\n <Tag\n sxr={{\n font: \"button\",\n }}\n >\n {children}\n </Tag>\n </Tag>\n </Tag>\n </Tag>\n )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n open: boolean;\n loading: boolean;\n content: string | ReactElement,\n size?: \"small\" | \"medium\" | \"large\" | number;\n closeButton?: boolean;\n clickOutsideToClose?: boolean;\n okButtonText?: string;\n cancelButtonText?: string;\n hideOkButton?: boolean;\n hideCancelButton?: boolean;\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n variant?: \"text\" | \"fill\"\n onConfirm?: () => Promise<void> | void;\n onCancel?: () => Promise<void> | void;\n transition?: TransitionVariantTypes;\n blurMode?: ModalProps['blurMode'];\n slotProps?: {\n modal?: Omit<ModalProps, 'open' | \"children\">;\n okButton?: Omit<ButtonProps, \"children\">;\n closeButton?: Omit<ButtonProps, \"children\">;\n }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n let {\n open,\n loading,\n content,\n size,\n color,\n direction,\n variant,\n closeButton,\n clickOutsideToClose,\n okButtonText,\n cancelButtonText,\n hideOkButton,\n hideCancelButton,\n buttonPlacement,\n onConfirm,\n onCancel,\n transition,\n blurMode,\n slotProps,\n ...rest\n } = props\n\n hideOkButton ??= false\n hideCancelButton ??= false\n\n size ??= \"small\"\n color ??= 'default'\n variant ??= \"text\"\n direction ??= \"column\"\n buttonPlacement ??= \"end\"\n let sx: any = {};\n\n switch (buttonPlacement) {\n case \"start\":\n sx.justifyContent = 'flex-start'\n break;\n case \"end\":\n sx.justifyContent = 'flex-end'\n break;\n case \"between\":\n sx.justifyContent = 'space-between'\n break;\n case \"full\":\n sx = {\n \"& button\": {\n flex: 1\n }\n }\n break;\n }\n\n let sizes: any = {\n small: 320,\n medium: 400,\n large: 600\n }\n\n let okcolor = color\n let closecolor = color\n if (color === 'default') {\n okcolor = 'brand'\n closecolor = 'default'\n variant = 'text'\n } else {\n if (variant === 'fill') {\n okcolor = 'default'\n closecolor = 'default'\n } else {\n okcolor = color\n closecolor = 'default'\n }\n }\n\n return (<Modal\n open={open}\n {...slotProps?.modal}\n size={sizes[size] || size}\n blur={40}\n blurMode={blurMode || \"transparent\"}\n transition={transition || \"zoom\"}\n onClickOutside={async () => {\n if (clickOutsideToClose && !loading) {\n onCancel && await onCancel()\n }\n }}\n >\n <Alert\n direction={direction}\n sx={{\n px: 2,\n py: 1,\n pt: direction === 'row' ? 1 : 2\n }}\n color={color}\n variant={variant}\n onClose={closeButton ? close : undefined}\n {...rest}\n >\n {content}\n <Tag\n sxr={{\n display: \"flex\",\n gap: 1,\n pt: 4,\n flexDirection: \"row\",\n ...sx,\n }}\n >\n {!hideCancelButton && <Button\n disabled={loading}\n color={closecolor}\n variant=\"fill\"\n {...slotProps?.closeButton}\n onClick={async () => {\n onCancel && await onCancel()\n }}\n >{cancelButtonText || \"Close\"}</Button>}\n <Button\n loading={loading}\n color={okcolor}\n variant=\"fill\"\n {...slotProps?.okButton}\n\n onClick={async () => {\n onConfirm && await onConfirm()\n }}\n >{okButtonText || \"OK\"}</Button>\n </Tag>\n </Alert>\n </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n const Inst = (_props: any) => <ConfirmAlert {..._props} />\n const confirm = Renderar.render(Inst as any, {\n ...props,\n open: true,\n loading: false,\n onConfirm: async () => {\n if (onConfirm) {\n confirm.updateProps({ loading: true })\n if (onConfirm) await onConfirm()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n onCancel: async () => {\n if (onCancel) {\n confirm.updateProps({ loading: true })\n await onCancel()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n slotProps: {\n ...props.slotProps,\n modal: {\n ...props.slotProps?.modal,\n onClosed: () => {\n confirm.unrender()\n if (props?.slotProps?.modal?.onClosed) {\n props.slotProps?.modal?.onClosed()\n }\n },\n }\n },\n })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
package/Alert/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { TagProps, useBreakpointPropsType, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from '@xanui/core';
2
+ import { TagProps, useBreakpointPropsType, UseColorTemplateType, UseColorTemplateColor, TransitionVariantTypes } from '@xanui/core';
3
3
  import React, { ReactElement } from 'react';
4
4
  import { ModalProps } from '../Modal/index.js';
5
5
  import { ButtonProps } from '../Button/index.js';
@@ -31,7 +31,7 @@ type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | "
31
31
  variant?: "text" | "fill";
32
32
  onConfirm?: () => Promise<void> | void;
33
33
  onCancel?: () => Promise<void> | void;
34
- transition?: UseTransitionVariantTypes;
34
+ transition?: TransitionVariantTypes;
35
35
  blurMode?: ModalProps['blurMode'];
36
36
  slotProps?: {
37
37
  modal?: Omit<ModalProps, 'open' | "children">;
package/Alert/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n title?: useBreakpointPropsType<string | ReactElement>;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n let [{\n title,\n variant,\n icon,\n color,\n direction,\n slotProps,\n onClose,\n ..._props\n }] = useInterface<any>(\"Alert\", rest, {\n variant: \"fill\"\n })\n color ??= \"default\"\n direction ??= \"row\"\n\n const _p: any = {}\n if (title) _p.title = title\n if (variant) _p.variant = variant\n if (icon) _p.icon = icon\n if (color) _p.color = color\n if (direction) _p.direction = direction\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n variant = p.variant\n icon = p.icon\n color = p.color\n direction = p.direction\n\n let isRow = direction === 'row'\n\n\n const template = useColorTemplate(color, variant)\n\n let iconsx = {\n fontSize: isRow ? 22 : 40,\n color: color === 'default' ? \"text.primary\" : template.primary.color\n }\n\n const icons: any = {\n \"info\": <InfoIcon sx={iconsx} />,\n \"warning\": <WarningIcon sx={iconsx} />,\n \"success\": <SuccessIcon sx={iconsx} />,\n \"danger\": <ErrorIcon sx={iconsx} />\n }\n\n let _icon = icons[icon] || icons[color]\n\n return (\n <Tag\n {..._props}\n baseClass=\"alert\"\n sxr={{\n justifyContent: \"flex-start\",\n position: \"relative\",\n radius: 1,\n px: isRow ? (_icon ? .5 : 2) : 3,\n py: isRow ? .5 : 3,\n flexDirection: \"column\",\n display: 'flex',\n ..._props?.sx\n }}\n {...template.primary}\n >\n {\n onClose && <IconButton\n color={color}\n variant={variant === 'fill' ? \"fill\" : \"text\"}\n size={25}\n sx={{\n position: \"absolute\",\n top: 5,\n right: 5\n }}\n onClick={onClose}\n className=\"alert-close-button\"\n >\n <IconClose fontSize={18} />\n </IconButton>\n }\n <Tag\n sx={{\n display: \"flex\",\n gap: 1,\n flexDirection: direction,\n alignItems: isRow ? \"flex-start\" : \"center\"\n }}\n baseClass=\"alert-container\"\n >\n {\n _icon && <Tag\n baseClass=\"alert-icon\"\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n p: isRow ? .5 : 0,\n \"& svg\": {\n color: template.primary.color\n }\n }}\n >\n {_icon}\n </Tag>\n }\n <Tag\n baseClass=\"alert-content\"\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n flex: 1,\n color: template.primary.color,\n textAlign: isRow ? \"left\" : \"center\",\n gap: isRow ? 0 : 1,\n width: \"100%\"\n }}\n >\n {title && <>\n {\n isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n className=\"alert-titles\"\n variant=\"text\"\n sx={{\n fontWeight: 500,\n color: template.primary.color\n }}\n >{title}</Text>\n }\n </>}\n <Tag\n sxr={{\n font: \"button\",\n }}\n >\n {children}\n </Tag>\n </Tag>\n </Tag>\n </Tag>\n )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n open: boolean;\n loading: boolean;\n content: string | ReactElement,\n size?: \"small\" | \"medium\" | \"large\" | number;\n closeButton?: boolean;\n clickOutsideToClose?: boolean;\n okButtonText?: string;\n cancelButtonText?: string;\n hideOkButton?: boolean;\n hideCancelButton?: boolean;\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n variant?: \"text\" | \"fill\"\n onConfirm?: () => Promise<void> | void;\n onCancel?: () => Promise<void> | void;\n transition?: UseTransitionVariantTypes;\n blurMode?: ModalProps['blurMode'];\n slotProps?: {\n modal?: Omit<ModalProps, 'open' | \"children\">;\n okButton?: Omit<ButtonProps, \"children\">;\n closeButton?: Omit<ButtonProps, \"children\">;\n }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n let {\n open,\n loading,\n content,\n size,\n color,\n direction,\n variant,\n closeButton,\n clickOutsideToClose,\n okButtonText,\n cancelButtonText,\n hideOkButton,\n hideCancelButton,\n buttonPlacement,\n onConfirm,\n onCancel,\n transition,\n blurMode,\n slotProps,\n ...rest\n } = props\n\n hideOkButton ??= false\n hideCancelButton ??= false\n\n size ??= \"small\"\n color ??= 'default'\n variant ??= \"text\"\n direction ??= \"column\"\n buttonPlacement ??= \"end\"\n let sx: any = {};\n\n switch (buttonPlacement) {\n case \"start\":\n sx.justifyContent = 'flex-start'\n break;\n case \"end\":\n sx.justifyContent = 'flex-end'\n break;\n case \"between\":\n sx.justifyContent = 'space-between'\n break;\n case \"full\":\n sx = {\n \"& button\": {\n flex: 1\n }\n }\n break;\n }\n\n let sizes: any = {\n small: 320,\n medium: 400,\n large: 600\n }\n\n let okcolor = color\n let closecolor = color\n if (color === 'default') {\n okcolor = 'brand'\n closecolor = 'default'\n variant = 'text'\n } else {\n if (variant === 'fill') {\n okcolor = 'default'\n closecolor = 'default'\n } else {\n okcolor = color\n closecolor = 'default'\n }\n }\n\n return (<Modal\n open={open}\n {...slotProps?.modal}\n size={sizes[size] || size}\n blur={40}\n blurMode={blurMode || \"transparent\"}\n transition={transition || \"zoom\"}\n onClickOutside={async () => {\n if (clickOutsideToClose && !loading) {\n onCancel && await onCancel()\n }\n }}\n >\n <Alert\n direction={direction}\n sx={{\n px: 2,\n py: 1,\n pt: direction === 'row' ? 1 : 2\n }}\n color={color}\n variant={variant}\n onClose={closeButton ? close : undefined}\n {...rest}\n >\n {content}\n <Tag\n sxr={{\n display: \"flex\",\n gap: 1,\n pt: 4,\n flexDirection: \"row\",\n ...sx,\n }}\n >\n {!hideCancelButton && <Button\n disabled={loading}\n color={closecolor}\n variant=\"fill\"\n {...slotProps?.closeButton}\n onClick={async () => {\n onCancel && await onCancel()\n }}\n >{cancelButtonText || \"Close\"}</Button>}\n <Button\n loading={loading}\n color={okcolor}\n variant=\"fill\"\n {...slotProps?.okButton}\n\n onClick={async () => {\n onConfirm && await onConfirm()\n }}\n >{okButtonText || \"OK\"}</Button>\n </Tag>\n </Alert>\n </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n const Inst = (_props: any) => <ConfirmAlert {..._props} />\n const confirm = Renderar.render(Inst as any, {\n ...props,\n open: true,\n loading: false,\n onConfirm: async () => {\n if (onConfirm) {\n confirm.updateProps({ loading: true })\n if (onConfirm) await onConfirm()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n onCancel: async () => {\n if (onCancel) {\n confirm.updateProps({ loading: true })\n await onCancel()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n slotProps: {\n ...props.slotProps,\n modal: {\n ...props.slotProps?.modal,\n onClosed: () => {\n confirm.unrender()\n if (props?.slotProps?.modal?.onClosed) {\n props.slotProps?.modal?.onClosed()\n }\n },\n }\n },\n })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, TransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n title?: useBreakpointPropsType<string | ReactElement>;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n let [{\n title,\n variant,\n icon,\n color,\n direction,\n slotProps,\n onClose,\n ..._props\n }] = useInterface<any>(\"Alert\", rest, {\n variant: \"fill\"\n })\n color ??= \"default\"\n direction ??= \"row\"\n\n const _p: any = {}\n if (title) _p.title = title\n if (variant) _p.variant = variant\n if (icon) _p.icon = icon\n if (color) _p.color = color\n if (direction) _p.direction = direction\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n variant = p.variant\n icon = p.icon\n color = p.color\n direction = p.direction\n\n let isRow = direction === 'row'\n\n\n const template = useColorTemplate(color, variant)\n\n let iconsx = {\n fontSize: isRow ? 22 : 40,\n color: color === 'default' ? \"text.primary\" : template.primary.color\n }\n\n const icons: any = {\n \"info\": <InfoIcon sx={iconsx} />,\n \"warning\": <WarningIcon sx={iconsx} />,\n \"success\": <SuccessIcon sx={iconsx} />,\n \"danger\": <ErrorIcon sx={iconsx} />\n }\n\n let _icon = icons[icon] || icons[color]\n\n return (\n <Tag\n {..._props}\n baseClass=\"alert\"\n sxr={{\n justifyContent: \"flex-start\",\n position: \"relative\",\n radius: 1,\n px: isRow ? (_icon ? .5 : 2) : 3,\n py: isRow ? .5 : 3,\n flexDirection: \"column\",\n display: 'flex',\n ..._props?.sx\n }}\n {...template.primary}\n >\n {\n onClose && <IconButton\n color={color}\n variant={variant === 'fill' ? \"fill\" : \"text\"}\n size={25}\n sx={{\n position: \"absolute\",\n top: 5,\n right: 5\n }}\n onClick={onClose}\n className=\"alert-close-button\"\n >\n <IconClose fontSize={18} />\n </IconButton>\n }\n <Tag\n sx={{\n display: \"flex\",\n gap: 1,\n flexDirection: direction,\n alignItems: isRow ? \"flex-start\" : \"center\"\n }}\n baseClass=\"alert-container\"\n >\n {\n _icon && <Tag\n baseClass=\"alert-icon\"\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n p: isRow ? .5 : 0,\n \"& svg\": {\n color: template.primary.color\n }\n }}\n >\n {_icon}\n </Tag>\n }\n <Tag\n baseClass=\"alert-content\"\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n flex: 1,\n color: template.primary.color,\n textAlign: isRow ? \"left\" : \"center\",\n gap: isRow ? 0 : 1,\n width: \"100%\"\n }}\n >\n {title && <>\n {\n isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n className=\"alert-titles\"\n variant=\"text\"\n sx={{\n fontWeight: 500,\n color: template.primary.color\n }}\n >{title}</Text>\n }\n </>}\n <Tag\n sxr={{\n font: \"button\",\n }}\n >\n {children}\n </Tag>\n </Tag>\n </Tag>\n </Tag>\n )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n open: boolean;\n loading: boolean;\n content: string | ReactElement,\n size?: \"small\" | \"medium\" | \"large\" | number;\n closeButton?: boolean;\n clickOutsideToClose?: boolean;\n okButtonText?: string;\n cancelButtonText?: string;\n hideOkButton?: boolean;\n hideCancelButton?: boolean;\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n variant?: \"text\" | \"fill\"\n onConfirm?: () => Promise<void> | void;\n onCancel?: () => Promise<void> | void;\n transition?: TransitionVariantTypes;\n blurMode?: ModalProps['blurMode'];\n slotProps?: {\n modal?: Omit<ModalProps, 'open' | \"children\">;\n okButton?: Omit<ButtonProps, \"children\">;\n closeButton?: Omit<ButtonProps, \"children\">;\n }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n let {\n open,\n loading,\n content,\n size,\n color,\n direction,\n variant,\n closeButton,\n clickOutsideToClose,\n okButtonText,\n cancelButtonText,\n hideOkButton,\n hideCancelButton,\n buttonPlacement,\n onConfirm,\n onCancel,\n transition,\n blurMode,\n slotProps,\n ...rest\n } = props\n\n hideOkButton ??= false\n hideCancelButton ??= false\n\n size ??= \"small\"\n color ??= 'default'\n variant ??= \"text\"\n direction ??= \"column\"\n buttonPlacement ??= \"end\"\n let sx: any = {};\n\n switch (buttonPlacement) {\n case \"start\":\n sx.justifyContent = 'flex-start'\n break;\n case \"end\":\n sx.justifyContent = 'flex-end'\n break;\n case \"between\":\n sx.justifyContent = 'space-between'\n break;\n case \"full\":\n sx = {\n \"& button\": {\n flex: 1\n }\n }\n break;\n }\n\n let sizes: any = {\n small: 320,\n medium: 400,\n large: 600\n }\n\n let okcolor = color\n let closecolor = color\n if (color === 'default') {\n okcolor = 'brand'\n closecolor = 'default'\n variant = 'text'\n } else {\n if (variant === 'fill') {\n okcolor = 'default'\n closecolor = 'default'\n } else {\n okcolor = color\n closecolor = 'default'\n }\n }\n\n return (<Modal\n open={open}\n {...slotProps?.modal}\n size={sizes[size] || size}\n blur={40}\n blurMode={blurMode || \"transparent\"}\n transition={transition || \"zoom\"}\n onClickOutside={async () => {\n if (clickOutsideToClose && !loading) {\n onCancel && await onCancel()\n }\n }}\n >\n <Alert\n direction={direction}\n sx={{\n px: 2,\n py: 1,\n pt: direction === 'row' ? 1 : 2\n }}\n color={color}\n variant={variant}\n onClose={closeButton ? close : undefined}\n {...rest}\n >\n {content}\n <Tag\n sxr={{\n display: \"flex\",\n gap: 1,\n pt: 4,\n flexDirection: \"row\",\n ...sx,\n }}\n >\n {!hideCancelButton && <Button\n disabled={loading}\n color={closecolor}\n variant=\"fill\"\n {...slotProps?.closeButton}\n onClick={async () => {\n onCancel && await onCancel()\n }}\n >{cancelButtonText || \"Close\"}</Button>}\n <Button\n loading={loading}\n color={okcolor}\n variant=\"fill\"\n {...slotProps?.okButton}\n\n onClick={async () => {\n onConfirm && await onConfirm()\n }}\n >{okButtonText || \"OK\"}</Button>\n </Tag>\n </Alert>\n </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n const Inst = (_props: any) => <ConfirmAlert {..._props} />\n const confirm = Renderar.render(Inst as any, {\n ...props,\n open: true,\n loading: false,\n onConfirm: async () => {\n if (onConfirm) {\n confirm.updateProps({ loading: true })\n if (onConfirm) await onConfirm()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n onCancel: async () => {\n if (onCancel) {\n confirm.updateProps({ loading: true })\n await onCancel()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n slotProps: {\n ...props.slotProps,\n modal: {\n ...props.slotProps?.modal,\n onClosed: () => {\n confirm.unrender()\n if (props?.slotProps?.modal?.onClosed) {\n props.slotProps?.modal?.onClosed()\n }\n },\n }\n },\n })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
package/Button/index.cjs CHANGED
@@ -17,7 +17,7 @@ const Button = React.forwardRef((_a, ref) => {
17
17
  color: "brand",
18
18
  corner: "rounded",
19
19
  size: "medium"
20
- }), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps } = _d, _props = tslib.__rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps"]);
20
+ }), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, disabled } = _d, _props = tslib.__rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps", "disabled"]);
21
21
  const _p = {};
22
22
  if (startIcon)
23
23
  _p.startIcon = startIcon;
@@ -77,7 +77,7 @@ const Button = React.forwardRef((_a, ref) => {
77
77
  if (skeleton) {
78
78
  return jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton, { height: _size.height, animation: "wave", sx: Object.assign(Object.assign(Object.assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton) === null || _b === void 0 ? void 0 : _b.sx), _size), cornerCss) }));
79
79
  }
80
- return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", cursor: "pointer", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none", fontWeight: 500 }, _size), cornerCss), template.primary), hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_c = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _c !== void 0 ? _c : false, ref: ref, children: [loading && jsxRuntime.jsx(core.Tag, { baseClass: 'button-loading-container', sxr: {
80
+ return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", cursor: "pointer", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none", fontWeight: 500 }, _size), cornerCss), template.primary), hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_c = disabled !== null && disabled !== void 0 ? disabled : loading) !== null && _c !== void 0 ? _c : false, ref: ref, children: [loading && jsxRuntime.jsx(core.Tag, { baseClass: 'button-loading-container', sxr: {
81
81
  position: "absolute",
82
82
  top: 0,
83
83
  left: 0,
package/Button/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<UseCornerTypes>;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n loading?: boolean;\n skeleton?: boolean;\n slotProps?: {\n loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\n skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, ..._props }] = useInterface<any>('Button', rest, {\n variant: \"fill\",\n color: \"brand\",\n corner: \"rounded\",\n size: \"medium\"\n })\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n if (size) _p.size = size\n if (direction) _p.direction = direction\n const p: any = useBreakpointProps(_p)\n\n startIcon = p.startIcon\n endIcon = p.endIcon\n color = p.color\n variant = p.variant\n corner = p.corner\n size = p.size\n direction = p.direction || \"row\"\n\n const template = useColorTemplate(color, variant)\n const cornerCss = useCorner(corner)\n\n const sizes: any = {\n small: {\n height: 38,\n px: (startIcon || endIcon) ? 1 : 1.5,\n gap: .5,\n fontSize: 'button'\n },\n medium: {\n height: 44,\n px: (startIcon || endIcon) ? 1.5 : 2,\n gap: 1,\n fontSize: 'button'\n },\n large: {\n height: 52,\n px: (startIcon || endIcon) ? 2 : 3,\n gap: 1,\n fontSize: \"text\"\n }\n }\n\n const progressSizes: any = {\n small: 20,\n medium: 25,\n large: 30\n }\n\n let _size = (sizes[size as any] || {})\n if (direction === 'column') {\n delete _size.height\n _size.gap = .5\n _size.py = 1\n }\n\n if (skeleton) {\n return <Skeleton\n {...slotProps?.skeleton}\n height={_size.height}\n animation={\"wave\"}\n sx={{\n ...slotProps?.skeleton?.sx,\n ..._size,\n ...cornerCss,\n }}\n />\n }\n\n return (\n <Tag\n component='button'\n baseClass='button'\n {..._props}\n sxr={{\n flexShrink: \"0\",\n whiteSpace: \"nowrap\",\n cursor: \"pointer\",\n display: \"flex\",\n textTransform: \"uppercase\",\n flexDirection: direction,\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n overflow: \"hidden\",\n userSelect: \"none\",\n fontWeight: 500,\n ..._size,\n ...cornerCss,\n ...template.primary,\n\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n disabled={loading ?? _props.disabled ?? false}\n ref={ref}\n >\n {loading && <Tag\n baseClass='button-loading-container'\n sxr={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n >\n <CircleProgress\n {...slotProps?.loading}\n color={color === 'default' ? `brand` : \"default\"}\n size={progressSizes[size]}\n className='button-loading-progress'\n />\n </Tag>}\n {startIcon && <Tag\n baseClass='button-start-icon'\n component='span'\n display=\"inline-block\"\n flexShrink={0}\n >{startIcon}</Tag>}\n {children}\n {endIcon && <Tag\n baseClass='button-end-icon'\n component='span'\n display=\"inline-block\"\n flexShrink={0}\n >{endIcon}</Tag>}\n </Tag>\n )\n})\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;;;;;AAyBA;;;AACI;AACI;AACA;AACA;AACA;;;AAIJ;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AACI;AACA;AACA;;;AAIJ;;AAEI;AACA;;;AAIA;;;AA6CY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<UseCornerTypes>;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n loading?: boolean;\n skeleton?: boolean;\n slotProps?: {\n loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\n skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, disabled, ..._props }] = useInterface<any>('Button', rest, {\n variant: \"fill\",\n color: \"brand\",\n corner: \"rounded\",\n size: \"medium\"\n })\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n if (size) _p.size = size\n if (direction) _p.direction = direction\n const p: any = useBreakpointProps(_p)\n\n startIcon = p.startIcon\n endIcon = p.endIcon\n color = p.color\n variant = p.variant\n corner = p.corner\n size = p.size\n direction = p.direction || \"row\"\n\n const template = useColorTemplate(color, variant)\n const cornerCss = useCorner(corner)\n\n const sizes: any = {\n small: {\n height: 38,\n px: (startIcon || endIcon) ? 1 : 1.5,\n gap: .5,\n fontSize: 'button'\n },\n medium: {\n height: 44,\n px: (startIcon || endIcon) ? 1.5 : 2,\n gap: 1,\n fontSize: 'button'\n },\n large: {\n height: 52,\n px: (startIcon || endIcon) ? 2 : 3,\n gap: 1,\n fontSize: \"text\"\n }\n }\n\n const progressSizes: any = {\n small: 20,\n medium: 25,\n large: 30\n }\n\n let _size = (sizes[size as any] || {})\n if (direction === 'column') {\n delete _size.height\n _size.gap = .5\n _size.py = 1\n }\n\n if (skeleton) {\n return <Skeleton\n {...slotProps?.skeleton}\n height={_size.height}\n animation={\"wave\"}\n sx={{\n ...slotProps?.skeleton?.sx,\n ..._size,\n ...cornerCss,\n }}\n />\n }\n\n return (\n <Tag\n component='button'\n baseClass='button'\n {..._props}\n sxr={{\n flexShrink: \"0\",\n whiteSpace: \"nowrap\",\n cursor: \"pointer\",\n display: \"flex\",\n textTransform: \"uppercase\",\n flexDirection: direction,\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n overflow: \"hidden\",\n userSelect: \"none\",\n fontWeight: 500,\n ..._size,\n ...cornerCss,\n ...template.primary,\n\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n disabled={disabled ?? loading ?? false}\n ref={ref}\n >\n {loading && <Tag\n baseClass='button-loading-container'\n sxr={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n >\n <CircleProgress\n {...slotProps?.loading}\n color={color === 'default' ? `brand` : \"default\"}\n size={progressSizes[size]}\n className='button-loading-progress'\n />\n </Tag>}\n {startIcon && <Tag\n baseClass='button-start-icon'\n component='span'\n display=\"inline-block\"\n flexShrink={0}\n >{startIcon}</Tag>}\n {children}\n {endIcon && <Tag\n baseClass='button-end-icon'\n component='span'\n display=\"inline-block\"\n flexShrink={0}\n >{endIcon}</Tag>}\n </Tag>\n )\n})\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;;;;;AAyBA;;;AACI;AACI;AACA;AACA;AACA;;;AAIJ;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AACI;AACA;AACA;;;AAIJ;;AAEI;AACA;;;AAIA;;;AA6CY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}
package/Button/index.js CHANGED
@@ -15,7 +15,7 @@ const Button = React.forwardRef((_a, ref) => {
15
15
  color: "brand",
16
16
  corner: "rounded",
17
17
  size: "medium"
18
- }), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps } = _d, _props = __rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps"]);
18
+ }), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, disabled } = _d, _props = __rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps", "disabled"]);
19
19
  const _p = {};
20
20
  if (startIcon)
21
21
  _p.startIcon = startIcon;
@@ -75,7 +75,7 @@ const Button = React.forwardRef((_a, ref) => {
75
75
  if (skeleton) {
76
76
  return jsx(Skeleton, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton, { height: _size.height, animation: "wave", sx: Object.assign(Object.assign(Object.assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton) === null || _b === void 0 ? void 0 : _b.sx), _size), cornerCss) }));
77
77
  }
78
- return (jsxs(Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", cursor: "pointer", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none", fontWeight: 500 }, _size), cornerCss), template.primary), hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_c = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _c !== void 0 ? _c : false, ref: ref, children: [loading && jsx(Tag, { baseClass: 'button-loading-container', sxr: {
78
+ return (jsxs(Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", cursor: "pointer", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none", fontWeight: 500 }, _size), cornerCss), template.primary), hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_c = disabled !== null && disabled !== void 0 ? disabled : loading) !== null && _c !== void 0 ? _c : false, ref: ref, children: [loading && jsx(Tag, { baseClass: 'button-loading-container', sxr: {
79
79
  position: "absolute",
80
80
  top: 0,
81
81
  left: 0,
package/Button/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<UseCornerTypes>;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n loading?: boolean;\n skeleton?: boolean;\n slotProps?: {\n loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\n skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, ..._props }] = useInterface<any>('Button', rest, {\n variant: \"fill\",\n color: \"brand\",\n corner: \"rounded\",\n size: \"medium\"\n })\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n if (size) _p.size = size\n if (direction) _p.direction = direction\n const p: any = useBreakpointProps(_p)\n\n startIcon = p.startIcon\n endIcon = p.endIcon\n color = p.color\n variant = p.variant\n corner = p.corner\n size = p.size\n direction = p.direction || \"row\"\n\n const template = useColorTemplate(color, variant)\n const cornerCss = useCorner(corner)\n\n const sizes: any = {\n small: {\n height: 38,\n px: (startIcon || endIcon) ? 1 : 1.5,\n gap: .5,\n fontSize: 'button'\n },\n medium: {\n height: 44,\n px: (startIcon || endIcon) ? 1.5 : 2,\n gap: 1,\n fontSize: 'button'\n },\n large: {\n height: 52,\n px: (startIcon || endIcon) ? 2 : 3,\n gap: 1,\n fontSize: \"text\"\n }\n }\n\n const progressSizes: any = {\n small: 20,\n medium: 25,\n large: 30\n }\n\n let _size = (sizes[size as any] || {})\n if (direction === 'column') {\n delete _size.height\n _size.gap = .5\n _size.py = 1\n }\n\n if (skeleton) {\n return <Skeleton\n {...slotProps?.skeleton}\n height={_size.height}\n animation={\"wave\"}\n sx={{\n ...slotProps?.skeleton?.sx,\n ..._size,\n ...cornerCss,\n }}\n />\n }\n\n return (\n <Tag\n component='button'\n baseClass='button'\n {..._props}\n sxr={{\n flexShrink: \"0\",\n whiteSpace: \"nowrap\",\n cursor: \"pointer\",\n display: \"flex\",\n textTransform: \"uppercase\",\n flexDirection: direction,\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n overflow: \"hidden\",\n userSelect: \"none\",\n fontWeight: 500,\n ..._size,\n ...cornerCss,\n ...template.primary,\n\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n disabled={loading ?? _props.disabled ?? false}\n ref={ref}\n >\n {loading && <Tag\n baseClass='button-loading-container'\n sxr={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n >\n <CircleProgress\n {...slotProps?.loading}\n color={color === 'default' ? `brand` : \"default\"}\n size={progressSizes[size]}\n className='button-loading-progress'\n />\n </Tag>}\n {startIcon && <Tag\n baseClass='button-start-icon'\n component='span'\n display=\"inline-block\"\n flexShrink={0}\n >{startIcon}</Tag>}\n {children}\n {endIcon && <Tag\n baseClass='button-end-icon'\n component='span'\n display=\"inline-block\"\n flexShrink={0}\n >{endIcon}</Tag>}\n </Tag>\n )\n})\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;;;AAyBA;;;AACI;AACI;AACA;AACA;AACA;;;AAIJ;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AACI;AACA;AACA;;;AAIJ;;AAEI;AACA;;;AAIA;;;AA6CY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<UseCornerTypes>;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n loading?: boolean;\n skeleton?: boolean;\n slotProps?: {\n loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\n skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, disabled, ..._props }] = useInterface<any>('Button', rest, {\n variant: \"fill\",\n color: \"brand\",\n corner: \"rounded\",\n size: \"medium\"\n })\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n if (size) _p.size = size\n if (direction) _p.direction = direction\n const p: any = useBreakpointProps(_p)\n\n startIcon = p.startIcon\n endIcon = p.endIcon\n color = p.color\n variant = p.variant\n corner = p.corner\n size = p.size\n direction = p.direction || \"row\"\n\n const template = useColorTemplate(color, variant)\n const cornerCss = useCorner(corner)\n\n const sizes: any = {\n small: {\n height: 38,\n px: (startIcon || endIcon) ? 1 : 1.5,\n gap: .5,\n fontSize: 'button'\n },\n medium: {\n height: 44,\n px: (startIcon || endIcon) ? 1.5 : 2,\n gap: 1,\n fontSize: 'button'\n },\n large: {\n height: 52,\n px: (startIcon || endIcon) ? 2 : 3,\n gap: 1,\n fontSize: \"text\"\n }\n }\n\n const progressSizes: any = {\n small: 20,\n medium: 25,\n large: 30\n }\n\n let _size = (sizes[size as any] || {})\n if (direction === 'column') {\n delete _size.height\n _size.gap = .5\n _size.py = 1\n }\n\n if (skeleton) {\n return <Skeleton\n {...slotProps?.skeleton}\n height={_size.height}\n animation={\"wave\"}\n sx={{\n ...slotProps?.skeleton?.sx,\n ..._size,\n ...cornerCss,\n }}\n />\n }\n\n return (\n <Tag\n component='button'\n baseClass='button'\n {..._props}\n sxr={{\n flexShrink: \"0\",\n whiteSpace: \"nowrap\",\n cursor: \"pointer\",\n display: \"flex\",\n textTransform: \"uppercase\",\n flexDirection: direction,\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n overflow: \"hidden\",\n userSelect: \"none\",\n fontWeight: 500,\n ..._size,\n ...cornerCss,\n ...template.primary,\n\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n disabled={disabled ?? loading ?? false}\n ref={ref}\n >\n {loading && <Tag\n baseClass='button-loading-container'\n sxr={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n >\n <CircleProgress\n {...slotProps?.loading}\n color={color === 'default' ? `brand` : \"default\"}\n size={progressSizes[size]}\n className='button-loading-progress'\n />\n </Tag>}\n {startIcon && <Tag\n baseClass='button-start-icon'\n component='span'\n display=\"inline-block\"\n flexShrink={0}\n >{startIcon}</Tag>}\n {children}\n {endIcon && <Tag\n baseClass='button-end-icon'\n component='span'\n display=\"inline-block\"\n flexShrink={0}\n >{endIcon}</Tag>}\n </Tag>\n )\n})\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;;;AAyBA;;;AACI;AACI;AACA;AACA;AACA;;;AAIJ;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AACI;AACA;AACA;;;AAIJ;;AAEI;AACA;;;AAIA;;;AA6CY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}
package/Menu/index.cjs CHANGED
@@ -52,6 +52,12 @@ const getTransformOrigin = (placement) => {
52
52
  return "top";
53
53
  }
54
54
  };
55
+ const clampToViewport = (menu, top, left) => {
56
+ const { width, height } = menu.getBoundingClientRect();
57
+ const clampedTop = Math.max(0, Math.min(top, window.innerHeight - height));
58
+ const clampedLeft = Math.max(0, Math.min(left, window.innerWidth - width));
59
+ return { top: clampedTop, left: clampedLeft };
60
+ };
55
61
  // Compute coordinates for each placement
56
62
  const computePosition = (placement, menu, target) => {
57
63
  const { width: mw, height: mh } = menu.getBoundingClientRect();
@@ -78,20 +84,40 @@ const isOffScreen = (menu) => {
78
84
  return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;
79
85
  };
80
86
  // Try to place menu and fallback if off-screen
87
+ // const placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {
88
+ // let pos = computePosition(placement, menu, target);
89
+ // menu.style.top = pos.top + "px";
90
+ // menu.style.left = pos.left + "px";
91
+ // if (isOffScreen(menu)) {
92
+ // for (const p of placements) {
93
+ // const fallbackPos = computePosition(p, menu, target);
94
+ // menu.style.top = fallbackPos.top + "px";
95
+ // menu.style.left = fallbackPos.left + "px";
96
+ // if (!isOffScreen(menu)) return p;
97
+ // }
98
+ // }
99
+ // return placement;
100
+ // };
81
101
  const placeMenu = (placement, menu, target) => {
102
+ let finalPlacement = placement;
82
103
  let pos = computePosition(placement, menu, target);
83
- menu.style.top = pos.top + "px";
84
- menu.style.left = pos.left + "px";
104
+ let clamped = clampToViewport(menu, pos.top, pos.left);
105
+ menu.style.top = clamped.top + "px";
106
+ menu.style.left = clamped.left + "px";
107
+ // Try better placements
85
108
  if (isOffScreen(menu)) {
86
109
  for (const p of placements) {
87
110
  const fallbackPos = computePosition(p, menu, target);
88
- menu.style.top = fallbackPos.top + "px";
89
- menu.style.left = fallbackPos.left + "px";
90
- if (!isOffScreen(menu))
91
- return p;
111
+ const fallbackClamped = clampToViewport(menu, fallbackPos.top, fallbackPos.left);
112
+ menu.style.top = fallbackClamped.top + "px";
113
+ menu.style.left = fallbackClamped.left + "px";
114
+ if (!isOffScreen(menu)) {
115
+ finalPlacement = p;
116
+ break;
117
+ }
92
118
  }
93
119
  }
94
- return placement;
120
+ return finalPlacement;
95
121
  };
96
122
  const Menu = (_a) => {
97
123
  var _b;
package/Menu/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n | \"top\"\n | \"top-left\"\n | \"top-right\"\n | \"bottom\"\n | \"bottom-left\"\n | \"bottom-right\"\n | \"right\"\n | \"right-top\"\n | \"right-bottom\"\n | \"left\"\n | \"left-top\"\n | \"left-bottom\";\n\nexport type MenuProps = {\n children?: ReactNode;\n target?: HTMLElement;\n placement?: useBreakpointPropsType<PlacementTypes>;\n zIndex?: number;\n\n variant?: TransitionProps['variant'];\n duration?: TransitionProps['duration'];\n onOpen?: TransitionProps['onOpen'];\n onOpened?: TransitionProps['onOpened'];\n onClose?: TransitionProps['onClose'];\n onClosed?: TransitionProps['onClosed'];\n\n onClickOutside?: (e: MouseEvent) => void;\n\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n portal?: Omit<PortalProps, \"children\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n };\n};\n\nconst placements: PlacementTypes[] = [\n \"top\",\n \"top-left\",\n \"top-right\",\n \"bottom\",\n \"bottom-left\",\n \"bottom-right\",\n \"right\",\n \"right-top\",\n \"right-bottom\",\n \"left\",\n \"left-top\",\n \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n switch (placement) {\n case \"top\":\n return \"bottom\";\n case \"top-left\":\n return \"bottom left\";\n case \"top-right\":\n return \"bottom right\";\n case \"bottom\":\n return \"top\";\n case \"bottom-left\":\n return \"top left\";\n case \"bottom-right\":\n return \"top right\";\n case \"left\":\n return \"right\";\n case \"left-top\":\n return \"top right\";\n case \"left-bottom\":\n return \"bottom right\";\n case \"right\":\n return \"left\";\n case \"right-top\":\n return \"top left\";\n case \"right-bottom\":\n return \"bottom left\";\n default:\n return \"top\";\n }\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n placement: PlacementTypes,\n menu: HTMLElement,\n target: HTMLElement\n) => {\n const { width: mw, height: mh } = menu.getBoundingClientRect();\n const {\n top: tt,\n left: tl,\n bottom: tb,\n right: tr,\n width: tw,\n height: th,\n } = target.getBoundingClientRect();\n\n const positions: Record<PlacementTypes, { top: number; left: number }> = {\n \"bottom-left\": { top: tb, left: tl },\n \"bottom-right\": { top: tb, left: tr - mw },\n bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n \"top-left\": { top: tt - mh, left: tl },\n \"top-right\": { top: tt - mh, left: tr - mw },\n top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n left: { top: tt + (th - mh) / 2, left: tl - mw },\n \"left-top\": { top: tt, left: tl - mw },\n \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n right: { top: tt + (th - mh) / 2, left: tr },\n \"right-top\": { top: tt, left: tr },\n \"right-bottom\": { top: tb - mh, left: tr },\n };\n\n return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n const { x, y, width, height } = menu.getBoundingClientRect();\n return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n let pos = computePosition(placement, menu, target);\n menu.style.top = pos.top + \"px\";\n menu.style.left = pos.left + \"px\";\n\n if (isOffScreen(menu)) {\n for (const p of placements) {\n const fallbackPos = computePosition(p, menu, target);\n menu.style.top = fallbackPos.top + \"px\";\n menu.style.left = fallbackPos.left + \"px\";\n if (!isOffScreen(menu)) return p;\n }\n }\n return placement;\n};\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n const _p: any = {};\n if (placement) _p.placement = placement;\n const p: any = useBreakpointProps(_p);\n placement = p.placement || \"bottom-left\";\n\n const isOpen = Boolean(target);\n const [closed, setClosed] = useState(!isOpen);\n const [placed, setPlaced] = useState<PlacementTypes>(placement);\n const menuRef = useRef<HTMLDivElement>(null);\n\n // Open/close effect\n useEffect(() => {\n if (closed && isOpen) setClosed(false);\n }, [isOpen]);\n\n\n useEffect(() => {\n if (!closed && target && menuRef.current) {\n const updatePosition = () => {\n if (menuRef.current && target) {\n requestAnimationFrame(() => {\n const p = placeMenu(placement!, menuRef.current as any, target);\n setPlaced(p);\n });\n }\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }\n return\n }, [closed, target, placement]);\n\n\n if (closed) return null;\n\n return (\n <Portal {...slotProps?.portal}>\n <ClickOutside\n onClickOutside={(e: MouseEvent) => {\n if (target?.contains(e.target as any)) return;\n if (e.target !== target) {\n onClickOutside && onClickOutside(e);\n }\n }}\n ref={menuRef}\n sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n >\n <Transition\n duration={duration ?? 200}\n easing=\"fast\"\n variant={variant ?? \"grow\"}\n {...slotProps?.transition}\n open={isOpen}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true);\n onClosed && onClosed()\n }}\n >\n <Tag\n baseClass=\"menu-content\"\n {...slotProps?.content}\n sxr={{\n overflow: \"hidden\",\n bgcolor: \"background.primary\",\n shadow: 2,\n radius: 1,\n transformOrigin: getTransformOrigin(placed),\n ...slotProps?.content?.sx,\n }}\n >\n {children}\n </Tag>\n </Transition>\n </ClickOutside>\n </Portal>\n );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;;;AA0CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;AAER;;;;AAoChB;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n | \"top\"\n | \"top-left\"\n | \"top-right\"\n | \"bottom\"\n | \"bottom-left\"\n | \"bottom-right\"\n | \"right\"\n | \"right-top\"\n | \"right-bottom\"\n | \"left\"\n | \"left-top\"\n | \"left-bottom\";\n\nexport type MenuProps = {\n children?: ReactNode;\n target?: HTMLElement;\n placement?: useBreakpointPropsType<PlacementTypes>;\n zIndex?: number;\n\n variant?: TransitionProps['variant'];\n duration?: TransitionProps['duration'];\n onOpen?: TransitionProps['onOpen'];\n onOpened?: TransitionProps['onOpened'];\n onClose?: TransitionProps['onClose'];\n onClosed?: TransitionProps['onClosed'];\n\n onClickOutside?: (e: MouseEvent) => void;\n\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n portal?: Omit<PortalProps, \"children\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n };\n};\n\nconst placements: PlacementTypes[] = [\n \"top\",\n \"top-left\",\n \"top-right\",\n \"bottom\",\n \"bottom-left\",\n \"bottom-right\",\n \"right\",\n \"right-top\",\n \"right-bottom\",\n \"left\",\n \"left-top\",\n \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n switch (placement) {\n case \"top\":\n return \"bottom\";\n case \"top-left\":\n return \"bottom left\";\n case \"top-right\":\n return \"bottom right\";\n case \"bottom\":\n return \"top\";\n case \"bottom-left\":\n return \"top left\";\n case \"bottom-right\":\n return \"top right\";\n case \"left\":\n return \"right\";\n case \"left-top\":\n return \"top right\";\n case \"left-bottom\":\n return \"bottom right\";\n case \"right\":\n return \"left\";\n case \"right-top\":\n return \"top left\";\n case \"right-bottom\":\n return \"bottom left\";\n default:\n return \"top\";\n }\n};\n\nconst clampToViewport = (menu: HTMLElement, top: number, left: number) => {\n const { width, height } = menu.getBoundingClientRect();\n\n const clampedTop = Math.max(0, Math.min(top, window.innerHeight - height));\n const clampedLeft = Math.max(0, Math.min(left, window.innerWidth - width));\n\n return { top: clampedTop, left: clampedLeft };\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n placement: PlacementTypes,\n menu: HTMLElement,\n target: HTMLElement\n) => {\n const { width: mw, height: mh } = menu.getBoundingClientRect();\n const {\n top: tt,\n left: tl,\n bottom: tb,\n right: tr,\n width: tw,\n height: th,\n } = target.getBoundingClientRect();\n\n const positions: Record<PlacementTypes, { top: number; left: number }> = {\n \"bottom-left\": { top: tb, left: tl },\n \"bottom-right\": { top: tb, left: tr - mw },\n bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n \"top-left\": { top: tt - mh, left: tl },\n \"top-right\": { top: tt - mh, left: tr - mw },\n top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n left: { top: tt + (th - mh) / 2, left: tl - mw },\n \"left-top\": { top: tt, left: tl - mw },\n \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n right: { top: tt + (th - mh) / 2, left: tr },\n \"right-top\": { top: tt, left: tr },\n \"right-bottom\": { top: tb - mh, left: tr },\n };\n\n return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n const { x, y, width, height } = menu.getBoundingClientRect();\n return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\n// const placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n// let pos = computePosition(placement, menu, target);\n// menu.style.top = pos.top + \"px\";\n// menu.style.left = pos.left + \"px\";\n\n// if (isOffScreen(menu)) {\n// for (const p of placements) {\n// const fallbackPos = computePosition(p, menu, target);\n// menu.style.top = fallbackPos.top + \"px\";\n// menu.style.left = fallbackPos.left + \"px\";\n// if (!isOffScreen(menu)) return p;\n// }\n// }\n// return placement;\n// };\n\nconst placeMenu = (\n placement: PlacementTypes,\n menu: HTMLElement,\n target: HTMLElement\n) => {\n let finalPlacement = placement;\n\n let pos = computePosition(placement, menu, target);\n let clamped = clampToViewport(menu, pos.top, pos.left);\n\n menu.style.top = clamped.top + \"px\";\n menu.style.left = clamped.left + \"px\";\n\n // Try better placements\n if (isOffScreen(menu)) {\n for (const p of placements) {\n const fallbackPos = computePosition(p, menu, target);\n const fallbackClamped = clampToViewport(menu, fallbackPos.top, fallbackPos.left);\n\n menu.style.top = fallbackClamped.top + \"px\";\n menu.style.left = fallbackClamped.left + \"px\";\n\n if (!isOffScreen(menu)) {\n finalPlacement = p;\n break;\n }\n }\n }\n\n return finalPlacement;\n};\n\n\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n const _p: any = {};\n if (placement) _p.placement = placement;\n const p: any = useBreakpointProps(_p);\n placement = p.placement || \"bottom-left\";\n\n const isOpen = Boolean(target);\n const [closed, setClosed] = useState(!isOpen);\n const [placed, setPlaced] = useState<PlacementTypes>(placement);\n const menuRef = useRef<HTMLDivElement>(null);\n\n // Open/close effect\n useEffect(() => {\n if (closed && isOpen) setClosed(false);\n }, [isOpen]);\n\n\n useEffect(() => {\n if (!closed && target && menuRef.current) {\n const updatePosition = () => {\n if (menuRef.current && target) {\n requestAnimationFrame(() => {\n const p = placeMenu(placement!, menuRef.current as any, target);\n setPlaced(p);\n });\n }\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }\n return\n }, [closed, target, placement]);\n\n if (closed) return null;\n\n return (\n <Portal {...slotProps?.portal}>\n <ClickOutside\n onClickOutside={(e: MouseEvent) => {\n if (target?.contains(e.target as any)) return;\n if (e.target !== target) {\n onClickOutside && onClickOutside(e);\n }\n }}\n ref={menuRef}\n sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n >\n <Transition\n duration={duration ?? 200}\n easing=\"fast\"\n variant={variant ?? \"grow\"}\n {...slotProps?.transition}\n open={isOpen}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true);\n onClosed && onClosed()\n }}\n >\n <Tag\n baseClass=\"menu-content\"\n {...slotProps?.content}\n sxr={{\n overflow: \"hidden\",\n bgcolor: \"background.primary\",\n shadow: 2,\n radius: 1,\n transformOrigin: getTransformOrigin(placed),\n ...slotProps?.content?.sx,\n }}\n >\n {children}\n </Tag>\n </Transition>\n </ClickOutside>\n </Portal>\n );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;;;AA0CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;;;;AAOA;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAQI;;;;AAMA;AACI;;AAEI;;;AAKA;;;;;;AAOR;AACJ;AAIA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAKR;AAAY;;;;AAOI;AACI;;AAER;;;;AAoChB;;"}
package/Menu/index.js CHANGED
@@ -50,6 +50,12 @@ const getTransformOrigin = (placement) => {
50
50
  return "top";
51
51
  }
52
52
  };
53
+ const clampToViewport = (menu, top, left) => {
54
+ const { width, height } = menu.getBoundingClientRect();
55
+ const clampedTop = Math.max(0, Math.min(top, window.innerHeight - height));
56
+ const clampedLeft = Math.max(0, Math.min(left, window.innerWidth - width));
57
+ return { top: clampedTop, left: clampedLeft };
58
+ };
53
59
  // Compute coordinates for each placement
54
60
  const computePosition = (placement, menu, target) => {
55
61
  const { width: mw, height: mh } = menu.getBoundingClientRect();
@@ -76,20 +82,40 @@ const isOffScreen = (menu) => {
76
82
  return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;
77
83
  };
78
84
  // Try to place menu and fallback if off-screen
85
+ // const placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {
86
+ // let pos = computePosition(placement, menu, target);
87
+ // menu.style.top = pos.top + "px";
88
+ // menu.style.left = pos.left + "px";
89
+ // if (isOffScreen(menu)) {
90
+ // for (const p of placements) {
91
+ // const fallbackPos = computePosition(p, menu, target);
92
+ // menu.style.top = fallbackPos.top + "px";
93
+ // menu.style.left = fallbackPos.left + "px";
94
+ // if (!isOffScreen(menu)) return p;
95
+ // }
96
+ // }
97
+ // return placement;
98
+ // };
79
99
  const placeMenu = (placement, menu, target) => {
100
+ let finalPlacement = placement;
80
101
  let pos = computePosition(placement, menu, target);
81
- menu.style.top = pos.top + "px";
82
- menu.style.left = pos.left + "px";
102
+ let clamped = clampToViewport(menu, pos.top, pos.left);
103
+ menu.style.top = clamped.top + "px";
104
+ menu.style.left = clamped.left + "px";
105
+ // Try better placements
83
106
  if (isOffScreen(menu)) {
84
107
  for (const p of placements) {
85
108
  const fallbackPos = computePosition(p, menu, target);
86
- menu.style.top = fallbackPos.top + "px";
87
- menu.style.left = fallbackPos.left + "px";
88
- if (!isOffScreen(menu))
89
- return p;
109
+ const fallbackClamped = clampToViewport(menu, fallbackPos.top, fallbackPos.left);
110
+ menu.style.top = fallbackClamped.top + "px";
111
+ menu.style.left = fallbackClamped.left + "px";
112
+ if (!isOffScreen(menu)) {
113
+ finalPlacement = p;
114
+ break;
115
+ }
90
116
  }
91
117
  }
92
- return placement;
118
+ return finalPlacement;
93
119
  };
94
120
  const Menu = (_a) => {
95
121
  var _b;
package/Menu/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n | \"top\"\n | \"top-left\"\n | \"top-right\"\n | \"bottom\"\n | \"bottom-left\"\n | \"bottom-right\"\n | \"right\"\n | \"right-top\"\n | \"right-bottom\"\n | \"left\"\n | \"left-top\"\n | \"left-bottom\";\n\nexport type MenuProps = {\n children?: ReactNode;\n target?: HTMLElement;\n placement?: useBreakpointPropsType<PlacementTypes>;\n zIndex?: number;\n\n variant?: TransitionProps['variant'];\n duration?: TransitionProps['duration'];\n onOpen?: TransitionProps['onOpen'];\n onOpened?: TransitionProps['onOpened'];\n onClose?: TransitionProps['onClose'];\n onClosed?: TransitionProps['onClosed'];\n\n onClickOutside?: (e: MouseEvent) => void;\n\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n portal?: Omit<PortalProps, \"children\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n };\n};\n\nconst placements: PlacementTypes[] = [\n \"top\",\n \"top-left\",\n \"top-right\",\n \"bottom\",\n \"bottom-left\",\n \"bottom-right\",\n \"right\",\n \"right-top\",\n \"right-bottom\",\n \"left\",\n \"left-top\",\n \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n switch (placement) {\n case \"top\":\n return \"bottom\";\n case \"top-left\":\n return \"bottom left\";\n case \"top-right\":\n return \"bottom right\";\n case \"bottom\":\n return \"top\";\n case \"bottom-left\":\n return \"top left\";\n case \"bottom-right\":\n return \"top right\";\n case \"left\":\n return \"right\";\n case \"left-top\":\n return \"top right\";\n case \"left-bottom\":\n return \"bottom right\";\n case \"right\":\n return \"left\";\n case \"right-top\":\n return \"top left\";\n case \"right-bottom\":\n return \"bottom left\";\n default:\n return \"top\";\n }\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n placement: PlacementTypes,\n menu: HTMLElement,\n target: HTMLElement\n) => {\n const { width: mw, height: mh } = menu.getBoundingClientRect();\n const {\n top: tt,\n left: tl,\n bottom: tb,\n right: tr,\n width: tw,\n height: th,\n } = target.getBoundingClientRect();\n\n const positions: Record<PlacementTypes, { top: number; left: number }> = {\n \"bottom-left\": { top: tb, left: tl },\n \"bottom-right\": { top: tb, left: tr - mw },\n bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n \"top-left\": { top: tt - mh, left: tl },\n \"top-right\": { top: tt - mh, left: tr - mw },\n top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n left: { top: tt + (th - mh) / 2, left: tl - mw },\n \"left-top\": { top: tt, left: tl - mw },\n \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n right: { top: tt + (th - mh) / 2, left: tr },\n \"right-top\": { top: tt, left: tr },\n \"right-bottom\": { top: tb - mh, left: tr },\n };\n\n return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n const { x, y, width, height } = menu.getBoundingClientRect();\n return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n let pos = computePosition(placement, menu, target);\n menu.style.top = pos.top + \"px\";\n menu.style.left = pos.left + \"px\";\n\n if (isOffScreen(menu)) {\n for (const p of placements) {\n const fallbackPos = computePosition(p, menu, target);\n menu.style.top = fallbackPos.top + \"px\";\n menu.style.left = fallbackPos.left + \"px\";\n if (!isOffScreen(menu)) return p;\n }\n }\n return placement;\n};\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n const _p: any = {};\n if (placement) _p.placement = placement;\n const p: any = useBreakpointProps(_p);\n placement = p.placement || \"bottom-left\";\n\n const isOpen = Boolean(target);\n const [closed, setClosed] = useState(!isOpen);\n const [placed, setPlaced] = useState<PlacementTypes>(placement);\n const menuRef = useRef<HTMLDivElement>(null);\n\n // Open/close effect\n useEffect(() => {\n if (closed && isOpen) setClosed(false);\n }, [isOpen]);\n\n\n useEffect(() => {\n if (!closed && target && menuRef.current) {\n const updatePosition = () => {\n if (menuRef.current && target) {\n requestAnimationFrame(() => {\n const p = placeMenu(placement!, menuRef.current as any, target);\n setPlaced(p);\n });\n }\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }\n return\n }, [closed, target, placement]);\n\n\n if (closed) return null;\n\n return (\n <Portal {...slotProps?.portal}>\n <ClickOutside\n onClickOutside={(e: MouseEvent) => {\n if (target?.contains(e.target as any)) return;\n if (e.target !== target) {\n onClickOutside && onClickOutside(e);\n }\n }}\n ref={menuRef}\n sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n >\n <Transition\n duration={duration ?? 200}\n easing=\"fast\"\n variant={variant ?? \"grow\"}\n {...slotProps?.transition}\n open={isOpen}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true);\n onClosed && onClosed()\n }}\n >\n <Tag\n baseClass=\"menu-content\"\n {...slotProps?.content}\n sxr={{\n overflow: \"hidden\",\n bgcolor: \"background.primary\",\n shadow: 2,\n radius: 1,\n transformOrigin: getTransformOrigin(placed),\n ...slotProps?.content?.sx,\n }}\n >\n {children}\n </Tag>\n </Transition>\n </ClickOutside>\n </Portal>\n );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;AA0CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;AAER;;;;AAoChB;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n | \"top\"\n | \"top-left\"\n | \"top-right\"\n | \"bottom\"\n | \"bottom-left\"\n | \"bottom-right\"\n | \"right\"\n | \"right-top\"\n | \"right-bottom\"\n | \"left\"\n | \"left-top\"\n | \"left-bottom\";\n\nexport type MenuProps = {\n children?: ReactNode;\n target?: HTMLElement;\n placement?: useBreakpointPropsType<PlacementTypes>;\n zIndex?: number;\n\n variant?: TransitionProps['variant'];\n duration?: TransitionProps['duration'];\n onOpen?: TransitionProps['onOpen'];\n onOpened?: TransitionProps['onOpened'];\n onClose?: TransitionProps['onClose'];\n onClosed?: TransitionProps['onClosed'];\n\n onClickOutside?: (e: MouseEvent) => void;\n\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n portal?: Omit<PortalProps, \"children\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n };\n};\n\nconst placements: PlacementTypes[] = [\n \"top\",\n \"top-left\",\n \"top-right\",\n \"bottom\",\n \"bottom-left\",\n \"bottom-right\",\n \"right\",\n \"right-top\",\n \"right-bottom\",\n \"left\",\n \"left-top\",\n \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n switch (placement) {\n case \"top\":\n return \"bottom\";\n case \"top-left\":\n return \"bottom left\";\n case \"top-right\":\n return \"bottom right\";\n case \"bottom\":\n return \"top\";\n case \"bottom-left\":\n return \"top left\";\n case \"bottom-right\":\n return \"top right\";\n case \"left\":\n return \"right\";\n case \"left-top\":\n return \"top right\";\n case \"left-bottom\":\n return \"bottom right\";\n case \"right\":\n return \"left\";\n case \"right-top\":\n return \"top left\";\n case \"right-bottom\":\n return \"bottom left\";\n default:\n return \"top\";\n }\n};\n\nconst clampToViewport = (menu: HTMLElement, top: number, left: number) => {\n const { width, height } = menu.getBoundingClientRect();\n\n const clampedTop = Math.max(0, Math.min(top, window.innerHeight - height));\n const clampedLeft = Math.max(0, Math.min(left, window.innerWidth - width));\n\n return { top: clampedTop, left: clampedLeft };\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n placement: PlacementTypes,\n menu: HTMLElement,\n target: HTMLElement\n) => {\n const { width: mw, height: mh } = menu.getBoundingClientRect();\n const {\n top: tt,\n left: tl,\n bottom: tb,\n right: tr,\n width: tw,\n height: th,\n } = target.getBoundingClientRect();\n\n const positions: Record<PlacementTypes, { top: number; left: number }> = {\n \"bottom-left\": { top: tb, left: tl },\n \"bottom-right\": { top: tb, left: tr - mw },\n bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n \"top-left\": { top: tt - mh, left: tl },\n \"top-right\": { top: tt - mh, left: tr - mw },\n top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n left: { top: tt + (th - mh) / 2, left: tl - mw },\n \"left-top\": { top: tt, left: tl - mw },\n \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n right: { top: tt + (th - mh) / 2, left: tr },\n \"right-top\": { top: tt, left: tr },\n \"right-bottom\": { top: tb - mh, left: tr },\n };\n\n return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n const { x, y, width, height } = menu.getBoundingClientRect();\n return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\n// const placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n// let pos = computePosition(placement, menu, target);\n// menu.style.top = pos.top + \"px\";\n// menu.style.left = pos.left + \"px\";\n\n// if (isOffScreen(menu)) {\n// for (const p of placements) {\n// const fallbackPos = computePosition(p, menu, target);\n// menu.style.top = fallbackPos.top + \"px\";\n// menu.style.left = fallbackPos.left + \"px\";\n// if (!isOffScreen(menu)) return p;\n// }\n// }\n// return placement;\n// };\n\nconst placeMenu = (\n placement: PlacementTypes,\n menu: HTMLElement,\n target: HTMLElement\n) => {\n let finalPlacement = placement;\n\n let pos = computePosition(placement, menu, target);\n let clamped = clampToViewport(menu, pos.top, pos.left);\n\n menu.style.top = clamped.top + \"px\";\n menu.style.left = clamped.left + \"px\";\n\n // Try better placements\n if (isOffScreen(menu)) {\n for (const p of placements) {\n const fallbackPos = computePosition(p, menu, target);\n const fallbackClamped = clampToViewport(menu, fallbackPos.top, fallbackPos.left);\n\n menu.style.top = fallbackClamped.top + \"px\";\n menu.style.left = fallbackClamped.left + \"px\";\n\n if (!isOffScreen(menu)) {\n finalPlacement = p;\n break;\n }\n }\n }\n\n return finalPlacement;\n};\n\n\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n const _p: any = {};\n if (placement) _p.placement = placement;\n const p: any = useBreakpointProps(_p);\n placement = p.placement || \"bottom-left\";\n\n const isOpen = Boolean(target);\n const [closed, setClosed] = useState(!isOpen);\n const [placed, setPlaced] = useState<PlacementTypes>(placement);\n const menuRef = useRef<HTMLDivElement>(null);\n\n // Open/close effect\n useEffect(() => {\n if (closed && isOpen) setClosed(false);\n }, [isOpen]);\n\n\n useEffect(() => {\n if (!closed && target && menuRef.current) {\n const updatePosition = () => {\n if (menuRef.current && target) {\n requestAnimationFrame(() => {\n const p = placeMenu(placement!, menuRef.current as any, target);\n setPlaced(p);\n });\n }\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }\n return\n }, [closed, target, placement]);\n\n if (closed) return null;\n\n return (\n <Portal {...slotProps?.portal}>\n <ClickOutside\n onClickOutside={(e: MouseEvent) => {\n if (target?.contains(e.target as any)) return;\n if (e.target !== target) {\n onClickOutside && onClickOutside(e);\n }\n }}\n ref={menuRef}\n sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n >\n <Transition\n duration={duration ?? 200}\n easing=\"fast\"\n variant={variant ?? \"grow\"}\n {...slotProps?.transition}\n open={isOpen}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true);\n onClosed && onClosed()\n }}\n >\n <Tag\n baseClass=\"menu-content\"\n {...slotProps?.content}\n sxr={{\n overflow: \"hidden\",\n bgcolor: \"background.primary\",\n shadow: 2,\n radius: 1,\n transformOrigin: getTransformOrigin(placed),\n ...slotProps?.content?.sx,\n }}\n >\n {children}\n </Tag>\n </Transition>\n </ClickOutside>\n </Portal>\n );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;AA0CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;;;;AAOA;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAQI;;;;AAMA;AACI;;AAEI;;;AAKA;;;;;;AAOR;AACJ;AAIA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAKR;AAAY;;;;AAOI;AACI;;AAER;;;;AAoChB;;"}
package/Portal/index.cjs CHANGED
@@ -20,7 +20,7 @@ const Portal = ({ children, appendTo, container }) => {
20
20
  appendTo.removeChild(c);
21
21
  };
22
22
  }, []);
23
- return ReactDOM.createPortal(jsxRuntime.jsx(core.ThemeProvider, { theme: theme.name, children: children }), c);
23
+ return ReactDOM.createPortal(jsxRuntime.jsx(core.ThemeProvider, { theme: theme, children: children }), c);
24
24
  };
25
25
 
26
26
  module.exports = Portal;
package/Portal/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from 'react'\nimport ReactDOM from 'react-dom';\nimport { useTheme, ThemeProvider } from '@xanui/core';\nexport type PortalProps = {\n children?: React.ReactNode;\n appendTo?: HTMLElement;\n container?: HTMLElement;\n}\n\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\n const theme = useTheme()\n appendTo = appendTo || document.body\n\n const c = useMemo(() => {\n let _con: HTMLElement = container || document.createElement(\"div\");\n appendTo.appendChild(_con);\n _con.className = \"xui-portal\"\n return _con\n }, [container])\n\n useEffect(() => {\n return () => {\n (appendTo as any).removeChild(c);\n }\n }, [])\n\n return ReactDOM.createPortal(\n <ThemeProvider theme={theme.name}>\n {children}\n </ThemeProvider>,\n c,\n );\n}\n\nexport default Portal"],"names":[],"mappings":";;;;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from 'react'\nimport ReactDOM from 'react-dom';\nimport { useTheme, ThemeProvider } from '@xanui/core';\nexport type PortalProps = {\n children?: React.ReactNode;\n appendTo?: HTMLElement;\n container?: HTMLElement;\n}\n\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\n const theme = useTheme()\n appendTo = appendTo || document.body\n\n const c = useMemo(() => {\n let _con: HTMLElement = container || document.createElement(\"div\");\n appendTo.appendChild(_con);\n _con.className = \"xui-portal\"\n return _con\n }, [container])\n\n useEffect(() => {\n return () => {\n (appendTo as any).removeChild(c);\n }\n }, [])\n\n return ReactDOM.createPortal(\n <ThemeProvider theme={theme}>\n {children}\n </ThemeProvider>,\n c,\n );\n}\n\nexport default Portal"],"names":[],"mappings":";;;;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}
package/Portal/index.js CHANGED
@@ -18,7 +18,7 @@ const Portal = ({ children, appendTo, container }) => {
18
18
  appendTo.removeChild(c);
19
19
  };
20
20
  }, []);
21
- return ReactDOM.createPortal(jsx(ThemeProvider, { theme: theme.name, children: children }), c);
21
+ return ReactDOM.createPortal(jsx(ThemeProvider, { theme: theme, children: children }), c);
22
22
  };
23
23
 
24
24
  export { Portal as default };
package/Portal/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from 'react'\nimport ReactDOM from 'react-dom';\nimport { useTheme, ThemeProvider } from '@xanui/core';\nexport type PortalProps = {\n children?: React.ReactNode;\n appendTo?: HTMLElement;\n container?: HTMLElement;\n}\n\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\n const theme = useTheme()\n appendTo = appendTo || document.body\n\n const c = useMemo(() => {\n let _con: HTMLElement = container || document.createElement(\"div\");\n appendTo.appendChild(_con);\n _con.className = \"xui-portal\"\n return _con\n }, [container])\n\n useEffect(() => {\n return () => {\n (appendTo as any).removeChild(c);\n }\n }, [])\n\n return ReactDOM.createPortal(\n <ThemeProvider theme={theme.name}>\n {children}\n </ThemeProvider>,\n c,\n );\n}\n\nexport default Portal"],"names":[],"mappings":";;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from 'react'\nimport ReactDOM from 'react-dom';\nimport { useTheme, ThemeProvider } from '@xanui/core';\nexport type PortalProps = {\n children?: React.ReactNode;\n appendTo?: HTMLElement;\n container?: HTMLElement;\n}\n\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\n const theme = useTheme()\n appendTo = appendTo || document.body\n\n const c = useMemo(() => {\n let _con: HTMLElement = container || document.createElement(\"div\");\n appendTo.appendChild(_con);\n _con.className = \"xui-portal\"\n return _con\n }, [container])\n\n useEffect(() => {\n return () => {\n (appendTo as any).removeChild(c);\n }\n }, [])\n\n return ReactDOM.createPortal(\n <ThemeProvider theme={theme}>\n {children}\n </ThemeProvider>,\n c,\n );\n}\n\nexport default Portal"],"names":[],"mappings":";;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}
package/package.json CHANGED
@@ -1,13 +1,12 @@
1
1
  {
2
2
  "name": "@xanui/ui",
3
- "version": "1.2.4",
3
+ "version": "1.2.6",
4
4
  "description": "Xanui - A React Component Library",
5
5
  "private": false,
6
6
  "dependencies": {
7
- "@xanui/core": "^1.2.54",
7
+ "@xanui/core": "^1.2.65",
8
8
  "@xanui/icons": "^1.1.12",
9
- "pretty-class": "^1.0.8",
10
- "react-state-bucket": "^1.2.17"
9
+ "pretty-class": "^1.0.8"
11
10
  },
12
11
  "keywords": [],
13
12
  "sideEffects": false,