@xanui/ui 1.1.61 → 1.1.63

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.
package/Select/index.cjs CHANGED
@@ -52,7 +52,7 @@ const Select = React.forwardRef((_a, ref) => {
52
52
  if (conRef.current.contains(e.target))
53
53
  return;
54
54
  toggleMenu();
55
- }, children: jsxRuntime.jsx(index$3, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant === "outline" ? "fill" : variant, children: childs })) }))] }));
55
+ }, children: jsxRuntime.jsx(index$3, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant === "outline" ? "fill" : variant, maxHeight: typeof window === "undefined" ? "auto" : (window === null || window === void 0 ? void 0 : window.innerHeight) - 50, overflow: "auto", children: childs })) }))] }));
56
56
  });
57
57
 
58
58
  module.exports = Select;
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\n refs?: {\n input?: React.Ref<any>;\n menu?: React.Ref<any>;\n list?: React.Ref<any>;\n };\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const mergeRefs = useMergeRefs(ref, conRef)\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n ref={mergeRefs}\n color={color}\n variant={variant === \"soft\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n error={error}\n helperText={helperText}\n name={name}\n {...slotProps?.input}\n {...inputProps}\n refs={{\n input: refs?.input,\n ...slotProps?.input?.refs\n }}\n slotProps={{\n rootContainer: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: () => {\n if (!target) {\n toggleMenu()\n }\n },\n }\n }}\n />\n <Menu\n ref={refs?.menu}\n target={target}\n placement=\"bottom-left\"\n {...slotProps?.menu}\n slotProps={{\n ...slotProps?.menu?.slotProps,\n content: {\n mt: .5,\n ...slotProps?.menu?.content,\n width: conRef && (conRef?.current as any)?.clientWidth,\n }\n }}\n onClickOutside={(e) => {\n if ((conRef.current as any).contains(e.target)) return;\n toggleMenu()\n }}\n >\n <List\n ref={refs?.list}\n {...slotProps?.list}\n color={color}\n variant={variant === \"outline\" ? \"fill\" : variant}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAcpB;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\n refs?: {\n input?: React.Ref<any>;\n menu?: React.Ref<any>;\n list?: React.Ref<any>;\n };\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const mergeRefs = useMergeRefs(ref, conRef)\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n ref={mergeRefs}\n color={color}\n variant={variant === \"soft\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n error={error}\n helperText={helperText}\n name={name}\n {...slotProps?.input}\n {...inputProps}\n refs={{\n input: refs?.input,\n ...slotProps?.input?.refs\n }}\n slotProps={{\n rootContainer: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: () => {\n if (!target) {\n toggleMenu()\n }\n },\n }\n }}\n />\n <Menu\n ref={refs?.menu}\n target={target}\n placement=\"bottom-left\"\n {...slotProps?.menu}\n slotProps={{\n ...slotProps?.menu?.slotProps,\n content: {\n mt: .5,\n ...slotProps?.menu?.content,\n width: conRef && (conRef?.current as any)?.clientWidth,\n }\n }}\n onClickOutside={(e) => {\n if ((conRef.current as any).contains(e.target)) return;\n toggleMenu()\n }}\n >\n <List\n ref={refs?.list}\n {...slotProps?.list}\n color={color}\n variant={variant === \"outline\" ? \"fill\" : variant}\n maxHeight={typeof window === \"undefined\" ? \"auto\" : window?.innerHeight - 50}\n overflow={\"auto\"}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;AACJ;AAehB;;"}
package/Select/index.js CHANGED
@@ -50,7 +50,7 @@ const Select = React.forwardRef((_a, ref) => {
50
50
  if (conRef.current.contains(e.target))
51
51
  return;
52
52
  toggleMenu();
53
- }, children: jsx(List, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant === "outline" ? "fill" : variant, children: childs })) }))] }));
53
+ }, children: jsx(List, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant === "outline" ? "fill" : variant, maxHeight: typeof window === "undefined" ? "auto" : (window === null || window === void 0 ? void 0 : window.innerHeight) - 50, overflow: "auto", children: childs })) }))] }));
54
54
  });
55
55
 
56
56
  export { Select as default };
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\n refs?: {\n input?: React.Ref<any>;\n menu?: React.Ref<any>;\n list?: React.Ref<any>;\n };\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const mergeRefs = useMergeRefs(ref, conRef)\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n ref={mergeRefs}\n color={color}\n variant={variant === \"soft\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n error={error}\n helperText={helperText}\n name={name}\n {...slotProps?.input}\n {...inputProps}\n refs={{\n input: refs?.input,\n ...slotProps?.input?.refs\n }}\n slotProps={{\n rootContainer: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: () => {\n if (!target) {\n toggleMenu()\n }\n },\n }\n }}\n />\n <Menu\n ref={refs?.menu}\n target={target}\n placement=\"bottom-left\"\n {...slotProps?.menu}\n slotProps={{\n ...slotProps?.menu?.slotProps,\n content: {\n mt: .5,\n ...slotProps?.menu?.content,\n width: conRef && (conRef?.current as any)?.clientWidth,\n }\n }}\n onClickOutside={(e) => {\n if ((conRef.current as any).contains(e.target)) return;\n toggleMenu()\n }}\n >\n <List\n ref={refs?.list}\n {...slotProps?.list}\n color={color}\n variant={variant === \"outline\" ? \"fill\" : variant}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAcpB;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\n refs?: {\n input?: React.Ref<any>;\n menu?: React.Ref<any>;\n list?: React.Ref<any>;\n };\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const mergeRefs = useMergeRefs(ref, conRef)\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n ref={mergeRefs}\n color={color}\n variant={variant === \"soft\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n error={error}\n helperText={helperText}\n name={name}\n {...slotProps?.input}\n {...inputProps}\n refs={{\n input: refs?.input,\n ...slotProps?.input?.refs\n }}\n slotProps={{\n rootContainer: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: () => {\n if (!target) {\n toggleMenu()\n }\n },\n }\n }}\n />\n <Menu\n ref={refs?.menu}\n target={target}\n placement=\"bottom-left\"\n {...slotProps?.menu}\n slotProps={{\n ...slotProps?.menu?.slotProps,\n content: {\n mt: .5,\n ...slotProps?.menu?.content,\n width: conRef && (conRef?.current as any)?.clientWidth,\n }\n }}\n onClickOutside={(e) => {\n if ((conRef.current as any).contains(e.target)) return;\n toggleMenu()\n }}\n >\n <List\n ref={refs?.list}\n {...slotProps?.list}\n color={color}\n variant={variant === \"outline\" ? \"fill\" : variant}\n maxHeight={typeof window === \"undefined\" ? \"auto\" : window?.innerHeight - 50}\n overflow={\"auto\"}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;AACJ;AAehB;;"}
package/Toast/index.cjs CHANGED
@@ -99,12 +99,12 @@ const RenderToasts = () => {
99
99
  continue;
100
100
  views.push(jsxRuntime.jsx(index, { overflow: "hidden", p: 1, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 280, height: "auto", maxHeight: "100vh" }, sx), children: items.map((itemprops, index) => {
101
101
  return (jsxRuntime.jsx(ToastView, Object.assign({}, itemprops, { onClosed: () => {
102
- let _items = items.splice(index, 1);
103
- if (!_items.length) {
102
+ items.splice(index, 1);
103
+ if (!items.length) {
104
104
  delete State[placement];
105
105
  }
106
106
  else {
107
- State[placement] = _items;
107
+ State[placement] = items;
108
108
  }
109
109
  if (!Object.keys(State).length) {
110
110
  core.Renderar.unrender(RenderToasts);
@@ -117,16 +117,14 @@ const RenderToasts = () => {
117
117
  const Toast = (props) => {
118
118
  props = React.isValidElement(props) ? { content: props } : props;
119
119
  let { placement = "bottom-right" } = (props || {});
120
- if (Object.keys(State).length) {
121
- if (!State[placement])
122
- State[placement] = [];
123
- State[placement].push(props);
120
+ const length = Object.keys(State).length;
121
+ if (!State[placement])
122
+ State[placement] = [];
123
+ State[placement].push(props);
124
+ if (length) {
124
125
  core.Renderar.updateProps(RenderToasts, {});
125
126
  }
126
127
  else {
127
- if (!State[placement])
128
- State[placement] = [];
129
- State[placement].push(props);
130
128
  core.Renderar.render(RenderToasts);
131
129
  }
132
130
  };
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType, Renderar } from \"@xanui/core\";\nimport React, { ReactElement } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n title?: useBreakpointPropsType<string | ReactElement>;\n content?: AlertProps['children'];\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n placement?: PlacementType;\n closeable?: useBreakpointPropsType<boolean>;\n autoColose?: boolean;\n autoColoseDelay?: number;\n pauseOnHover?: boolean;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n let sx: any = {}\n let transition: any = \"\"\n switch (placement) {\n case \"top-left\":\n sx = {\n top: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"top-right\":\n sx = {\n top: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"top-center\":\n sx = {\n top: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeDown\"\n break;\n case \"bottom-right\":\n sx = {\n bottom: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"bottom-left\":\n sx = {\n bottom: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"bottom-center\":\n sx = {\n bottom: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeUp\"\n break;\n }\n return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\n const [open, setOpen] = React.useState(true)\n const [timer, setTimer] = React.useState<any>(null)\n const {\n placement = \"bottom-right\",\n content,\n closeable,\n onClosed,\n autoColose = true,\n pauseOnHover = true,\n autoColoseDelay = 6000,\n ...rest\n } = props || {}\n\n const { transition } = formatPacement(placement)\n\n return (<Transition\n open={open}\n variant={transition}\n onClosed={() => {\n onClosed()\n }}\n onOpened={() => {\n if (autoColose) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n >\n <Alert\n variant=\"fill\"\n color=\"brand\"\n {...rest as any}\n mode=\"item\"\n mb={1}\n onMouseEnter={() => {\n (autoColose && pauseOnHover) && clearTimeout(timer)\n }}\n onMouseLeave={() => {\n if (autoColose && pauseOnHover) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n onClose={closeable ? () => setOpen(false) : undefined}\n >{content}</Alert>\n </Transition>)\n}\n\nconst State: Record<PlacementType, UseToastProps[]> = {\n // \"top-left\": [],\n // \"top-center\": [],\n // \"top-right\": [],\n // \"bottom-left\": [],\n // \"bottom-center\": [],\n // \"bottom-right\": []\n} as any\n\nconst RenderToasts = () => {\n let views = []\n\n for (let placement in State) {\n const items = (State as any)[placement]\n const { sx } = formatPacement(placement as any)\n if (!items.length) continue;\n views.push(\n <Scrollbar\n key={`toast-render-${placement}`}\n overflow=\"hidden\"\n p={1}\n sx={{\n position: \"fixed\",\n zIndex: 99999999,\n display: \"flex\",\n justifyContent: \"flex-end\",\n flexDirection: \"column\",\n width: 280,\n height: \"auto\",\n maxHeight: \"100vh\",\n ...sx\n }}\n >\n\n {items.map((itemprops: UseToastProps, index: number) => {\n return (\n <ToastView\n key={`toast-view-${index}`}\n {...itemprops}\n onClosed={() => {\n let _items = items.splice(index, 1)\n if (!_items.length) {\n delete (State as any)[placement]\n } else {\n (State as any)[placement] = _items\n }\n if (!Object.keys(State).length) {\n Renderar.unrender(RenderToasts)\n }\n }}\n />\n )\n })}\n </Scrollbar >\n )\n }\n\n return views\n}\n\nconst Toast = (props?: UseToastProps['content'] | UseToastProps) => {\n props = React.isValidElement(props) ? { content: props } : props\n let { placement = \"bottom-right\" } = (props || {}) as UseToastProps\n\n if (Object.keys(State).length) {\n if (!State[placement]) State[placement] = []\n State[placement].push(props as any)\n Renderar.updateProps(RenderToasts, {})\n } else {\n if (!State[placement]) State[placement] = []\n State[placement].push(props as any)\n Renderar.render(RenderToasts)\n }\n}\n\nexport default Toast;"],"names":[],"mappings":";;;;;;;;;;AAuBA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;AACA;;AAaA;AAIQ;AACJ;;AAGQ;;AAEA;;;;AAYJ;AAEI;AACI;;AAEA;;;AAMpB;AAEA;AACI;AACA;AACA;AACA;AACA;AACA;;AAGJ;;AAGI;AACI;;;;;;;AA4BwB;AACI;;;AAEC;;;AAGD;;AAER;AAGZ;;AAKZ;AACJ;AAEA;AACI;;;AAII;AAAuB;;AAEvB;;;AAEA;AAAuB;;AAEvB;;AAER;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType, Renderar } from \"@xanui/core\";\nimport React, { ReactElement } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n title?: useBreakpointPropsType<string | ReactElement>;\n content?: AlertProps['children'];\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n placement?: PlacementType;\n closeable?: useBreakpointPropsType<boolean>;\n autoColose?: boolean;\n autoColoseDelay?: number;\n pauseOnHover?: boolean;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n let sx: any = {}\n let transition: any = \"\"\n switch (placement) {\n case \"top-left\":\n sx = {\n top: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"top-right\":\n sx = {\n top: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"top-center\":\n sx = {\n top: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeDown\"\n break;\n case \"bottom-right\":\n sx = {\n bottom: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"bottom-left\":\n sx = {\n bottom: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"bottom-center\":\n sx = {\n bottom: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeUp\"\n break;\n }\n return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\n const [open, setOpen] = React.useState(true)\n const [timer, setTimer] = React.useState<any>(null)\n const {\n placement = \"bottom-right\",\n content,\n closeable,\n onClosed,\n autoColose = true,\n pauseOnHover = true,\n autoColoseDelay = 6000,\n ...rest\n } = props || {}\n\n const { transition } = formatPacement(placement)\n\n return (<Transition\n open={open}\n variant={transition}\n onClosed={() => {\n onClosed()\n }}\n onOpened={() => {\n if (autoColose) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n >\n <Alert\n variant=\"fill\"\n color=\"brand\"\n {...rest as any}\n mode=\"item\"\n mb={1}\n onMouseEnter={() => {\n (autoColose && pauseOnHover) && clearTimeout(timer)\n }}\n onMouseLeave={() => {\n if (autoColose && pauseOnHover) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n onClose={closeable ? () => setOpen(false) : undefined}\n >{content}</Alert>\n </Transition>)\n}\n\nconst State: Record<PlacementType, UseToastProps[]> = {\n // \"top-left\": [],\n // \"top-center\": [],\n // \"top-right\": [],\n // \"bottom-left\": [],\n // \"bottom-center\": [],\n // \"bottom-right\": []\n} as any\n\nconst RenderToasts = () => {\n let views = []\n\n for (let placement in State) {\n const items = (State as any)[placement]\n const { sx } = formatPacement(placement as any)\n if (!items.length) continue;\n views.push(\n <Scrollbar\n key={`toast-render-${placement}`}\n overflow=\"hidden\"\n p={1}\n sx={{\n position: \"fixed\",\n zIndex: 99999999,\n display: \"flex\",\n justifyContent: \"flex-end\",\n flexDirection: \"column\",\n width: 280,\n height: \"auto\",\n maxHeight: \"100vh\",\n ...sx\n }}\n >\n\n {items.map((itemprops: UseToastProps, index: number) => {\n return (\n <ToastView\n key={`toast-view-${index}`}\n {...itemprops}\n onClosed={() => {\n items.splice(index, 1)\n if (!items.length) {\n delete (State as any)[placement]\n } else {\n (State as any)[placement] = items\n }\n if (!Object.keys(State).length) {\n Renderar.unrender(RenderToasts)\n }\n }}\n />\n )\n })}\n </Scrollbar >\n )\n }\n\n return views\n}\n\nconst Toast = (props?: UseToastProps['content'] | UseToastProps) => {\n props = React.isValidElement(props) ? { content: props } : props\n let { placement = \"bottom-right\" } = (props || {}) as UseToastProps\n const length = Object.keys(State).length\n if (!State[placement]) State[placement] = []\n State[placement].push(props as any)\n if (length) {\n Renderar.updateProps(RenderToasts, {})\n } else {\n Renderar.render(RenderToasts)\n }\n}\n\nexport default Toast;"],"names":[],"mappings":";;;;;;;;;;AAuBA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;AACA;;AAaA;AAIQ;AACJ;;AAGQ;;AAEA;;;;AAYJ;AAEI;AACI;;AAEA;;;AAMpB;AAEA;AACI;AACA;AACA;AACA;AACA;AACA;;AAGJ;;AAGI;AACI;;;;;;AA2BwB;AACA;AACI;;;AAEC;;;AAGD;;AAER;AAGZ;;AAKZ;AACJ;AAEA;AACI;;;AAGA;AAAuB;;;AAGnB;;;AAEA;;AAER;;"}
package/Toast/index.js CHANGED
@@ -97,12 +97,12 @@ const RenderToasts = () => {
97
97
  continue;
98
98
  views.push(jsx(Scrollbar, { overflow: "hidden", p: 1, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 280, height: "auto", maxHeight: "100vh" }, sx), children: items.map((itemprops, index) => {
99
99
  return (jsx(ToastView, Object.assign({}, itemprops, { onClosed: () => {
100
- let _items = items.splice(index, 1);
101
- if (!_items.length) {
100
+ items.splice(index, 1);
101
+ if (!items.length) {
102
102
  delete State[placement];
103
103
  }
104
104
  else {
105
- State[placement] = _items;
105
+ State[placement] = items;
106
106
  }
107
107
  if (!Object.keys(State).length) {
108
108
  Renderar.unrender(RenderToasts);
@@ -115,16 +115,14 @@ const RenderToasts = () => {
115
115
  const Toast = (props) => {
116
116
  props = React.isValidElement(props) ? { content: props } : props;
117
117
  let { placement = "bottom-right" } = (props || {});
118
- if (Object.keys(State).length) {
119
- if (!State[placement])
120
- State[placement] = [];
121
- State[placement].push(props);
118
+ const length = Object.keys(State).length;
119
+ if (!State[placement])
120
+ State[placement] = [];
121
+ State[placement].push(props);
122
+ if (length) {
122
123
  Renderar.updateProps(RenderToasts, {});
123
124
  }
124
125
  else {
125
- if (!State[placement])
126
- State[placement] = [];
127
- State[placement].push(props);
128
126
  Renderar.render(RenderToasts);
129
127
  }
130
128
  };
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType, Renderar } from \"@xanui/core\";\nimport React, { ReactElement } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n title?: useBreakpointPropsType<string | ReactElement>;\n content?: AlertProps['children'];\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n placement?: PlacementType;\n closeable?: useBreakpointPropsType<boolean>;\n autoColose?: boolean;\n autoColoseDelay?: number;\n pauseOnHover?: boolean;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n let sx: any = {}\n let transition: any = \"\"\n switch (placement) {\n case \"top-left\":\n sx = {\n top: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"top-right\":\n sx = {\n top: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"top-center\":\n sx = {\n top: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeDown\"\n break;\n case \"bottom-right\":\n sx = {\n bottom: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"bottom-left\":\n sx = {\n bottom: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"bottom-center\":\n sx = {\n bottom: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeUp\"\n break;\n }\n return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\n const [open, setOpen] = React.useState(true)\n const [timer, setTimer] = React.useState<any>(null)\n const {\n placement = \"bottom-right\",\n content,\n closeable,\n onClosed,\n autoColose = true,\n pauseOnHover = true,\n autoColoseDelay = 6000,\n ...rest\n } = props || {}\n\n const { transition } = formatPacement(placement)\n\n return (<Transition\n open={open}\n variant={transition}\n onClosed={() => {\n onClosed()\n }}\n onOpened={() => {\n if (autoColose) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n >\n <Alert\n variant=\"fill\"\n color=\"brand\"\n {...rest as any}\n mode=\"item\"\n mb={1}\n onMouseEnter={() => {\n (autoColose && pauseOnHover) && clearTimeout(timer)\n }}\n onMouseLeave={() => {\n if (autoColose && pauseOnHover) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n onClose={closeable ? () => setOpen(false) : undefined}\n >{content}</Alert>\n </Transition>)\n}\n\nconst State: Record<PlacementType, UseToastProps[]> = {\n // \"top-left\": [],\n // \"top-center\": [],\n // \"top-right\": [],\n // \"bottom-left\": [],\n // \"bottom-center\": [],\n // \"bottom-right\": []\n} as any\n\nconst RenderToasts = () => {\n let views = []\n\n for (let placement in State) {\n const items = (State as any)[placement]\n const { sx } = formatPacement(placement as any)\n if (!items.length) continue;\n views.push(\n <Scrollbar\n key={`toast-render-${placement}`}\n overflow=\"hidden\"\n p={1}\n sx={{\n position: \"fixed\",\n zIndex: 99999999,\n display: \"flex\",\n justifyContent: \"flex-end\",\n flexDirection: \"column\",\n width: 280,\n height: \"auto\",\n maxHeight: \"100vh\",\n ...sx\n }}\n >\n\n {items.map((itemprops: UseToastProps, index: number) => {\n return (\n <ToastView\n key={`toast-view-${index}`}\n {...itemprops}\n onClosed={() => {\n let _items = items.splice(index, 1)\n if (!_items.length) {\n delete (State as any)[placement]\n } else {\n (State as any)[placement] = _items\n }\n if (!Object.keys(State).length) {\n Renderar.unrender(RenderToasts)\n }\n }}\n />\n )\n })}\n </Scrollbar >\n )\n }\n\n return views\n}\n\nconst Toast = (props?: UseToastProps['content'] | UseToastProps) => {\n props = React.isValidElement(props) ? { content: props } : props\n let { placement = \"bottom-right\" } = (props || {}) as UseToastProps\n\n if (Object.keys(State).length) {\n if (!State[placement]) State[placement] = []\n State[placement].push(props as any)\n Renderar.updateProps(RenderToasts, {})\n } else {\n if (!State[placement]) State[placement] = []\n State[placement].push(props as any)\n Renderar.render(RenderToasts)\n }\n}\n\nexport default Toast;"],"names":[],"mappings":";;;;;;;;AAuBA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;AACA;;AAaA;AAIQ;AACJ;;AAGQ;;AAEA;;;;AAYJ;AAEI;AACI;;AAEA;;;AAMpB;AAEA;AACI;AACA;AACA;AACA;AACA;AACA;;AAGJ;;AAGI;AACI;;;;;;;AA4BwB;AACI;;;AAEC;;;AAGD;;AAER;AAGZ;;AAKZ;AACJ;AAEA;AACI;;;AAII;AAAuB;;AAEvB;;;AAEA;AAAuB;;AAEvB;;AAER;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType, Renderar } from \"@xanui/core\";\nimport React, { ReactElement } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n title?: useBreakpointPropsType<string | ReactElement>;\n content?: AlertProps['children'];\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n placement?: PlacementType;\n closeable?: useBreakpointPropsType<boolean>;\n autoColose?: boolean;\n autoColoseDelay?: number;\n pauseOnHover?: boolean;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n let sx: any = {}\n let transition: any = \"\"\n switch (placement) {\n case \"top-left\":\n sx = {\n top: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"top-right\":\n sx = {\n top: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"top-center\":\n sx = {\n top: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeDown\"\n break;\n case \"bottom-right\":\n sx = {\n bottom: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"bottom-left\":\n sx = {\n bottom: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"bottom-center\":\n sx = {\n bottom: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeUp\"\n break;\n }\n return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\n const [open, setOpen] = React.useState(true)\n const [timer, setTimer] = React.useState<any>(null)\n const {\n placement = \"bottom-right\",\n content,\n closeable,\n onClosed,\n autoColose = true,\n pauseOnHover = true,\n autoColoseDelay = 6000,\n ...rest\n } = props || {}\n\n const { transition } = formatPacement(placement)\n\n return (<Transition\n open={open}\n variant={transition}\n onClosed={() => {\n onClosed()\n }}\n onOpened={() => {\n if (autoColose) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n >\n <Alert\n variant=\"fill\"\n color=\"brand\"\n {...rest as any}\n mode=\"item\"\n mb={1}\n onMouseEnter={() => {\n (autoColose && pauseOnHover) && clearTimeout(timer)\n }}\n onMouseLeave={() => {\n if (autoColose && pauseOnHover) {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, autoColoseDelay))\n }\n }}\n onClose={closeable ? () => setOpen(false) : undefined}\n >{content}</Alert>\n </Transition>)\n}\n\nconst State: Record<PlacementType, UseToastProps[]> = {\n // \"top-left\": [],\n // \"top-center\": [],\n // \"top-right\": [],\n // \"bottom-left\": [],\n // \"bottom-center\": [],\n // \"bottom-right\": []\n} as any\n\nconst RenderToasts = () => {\n let views = []\n\n for (let placement in State) {\n const items = (State as any)[placement]\n const { sx } = formatPacement(placement as any)\n if (!items.length) continue;\n views.push(\n <Scrollbar\n key={`toast-render-${placement}`}\n overflow=\"hidden\"\n p={1}\n sx={{\n position: \"fixed\",\n zIndex: 99999999,\n display: \"flex\",\n justifyContent: \"flex-end\",\n flexDirection: \"column\",\n width: 280,\n height: \"auto\",\n maxHeight: \"100vh\",\n ...sx\n }}\n >\n\n {items.map((itemprops: UseToastProps, index: number) => {\n return (\n <ToastView\n key={`toast-view-${index}`}\n {...itemprops}\n onClosed={() => {\n items.splice(index, 1)\n if (!items.length) {\n delete (State as any)[placement]\n } else {\n (State as any)[placement] = items\n }\n if (!Object.keys(State).length) {\n Renderar.unrender(RenderToasts)\n }\n }}\n />\n )\n })}\n </Scrollbar >\n )\n }\n\n return views\n}\n\nconst Toast = (props?: UseToastProps['content'] | UseToastProps) => {\n props = React.isValidElement(props) ? { content: props } : props\n let { placement = \"bottom-right\" } = (props || {}) as UseToastProps\n const length = Object.keys(State).length\n if (!State[placement]) State[placement] = []\n State[placement].push(props as any)\n if (length) {\n Renderar.updateProps(RenderToasts, {})\n } else {\n Renderar.render(RenderToasts)\n }\n}\n\nexport default Toast;"],"names":[],"mappings":";;;;;;;;AAuBA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;AACA;;AAaA;AAIQ;AACJ;;AAGQ;;AAEA;;;;AAYJ;AAEI;AACI;;AAEA;;;AAMpB;AAEA;AACI;AACA;AACA;AACA;AACA;AACA;;AAGJ;;AAGI;AACI;;;;;;AA2BwB;AACA;AACI;;;AAEC;;;AAGD;;AAER;AAGZ;;AAKZ;AACJ;AAEA;AACI;;;AAGA;AAAuB;;;AAGnB;;;AAEA;;AAER;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xanui/ui",
3
- "version": "1.1.61",
3
+ "version": "1.1.63",
4
4
  "description": "Xanui - A React Component Library",
5
5
  "private": false,
6
6
  "dependencies": {