@canlooks/can-ui 0.0.208 → 0.0.209

package/dist/cjs/components/selectedList/selectedItem.d.ts

@@ -1,7 +1,6 @@
 import { AlertProps } from '../alert';
 import { Id } from '../../types';
-import { SelectedListProps } from './selectedList';
-interface SelectedItemProps extends Omit<AlertProps, 'onClose'>, Pick<SelectedListProps, 'itemProps'> {
+interface SelectedItemProps extends Omit<AlertProps, 'onClose'> {
     value: Id;
     index: number;
     itemProps?(value: Id, index: number): AlertProps | Promise<AlertProps>;

package/dist/cjs/components/selectedList/selectedItem.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const alert_1 = require("../alert");
 const utils_1 = require("../../utils");
 const react_1 = require("react");
-const transitionBase_1 = require("../transitionBase");
 const selectedList_style_1 = require("./selectedList.style");
 const sortableItem_1 = require("../sortableItem");
 function SelectedItem({ value, index, itemProps, onClose, sortable, ...props }) {
@@ -18,5 +17,5 @@ function SelectedItem({ value, index, itemProps, onClose, sortable, ...props })
         alertProps.current?.onClose?.(e);
         onClose?.(value, index);
     };
-    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { ...props, className: selectedList_style_1.classes.option, children: (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: alert_1.Alert, disabled: !sortable, id: value, index: index, closable: true, color: "info", showIcon: false, ...alertProps.current, className: (0, utils_1.clsx)(selectedList_style_1.classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
+    return ((0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: alert_1.Alert, id: value, index: index, closable: true, color: "info", showIcon: false, ...props, ...alertProps.current, className: (0, utils_1.clsx)(selectedList_style_1.classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }));
 }

package/dist/cjs/components/selectedList/selectedList.d.ts

@@ -1,13 +1,12 @@
 import { ReactElement, Ref } from 'react';
-import { Id } from '../../types';
+import { DivProps, Id } from '../../types';
 import { AlertProps } from '../alert';
-import { TransitionGroupProps } from 'react-transition-group/TransitionGroup';
-export type SelectedListProps<V extends Id = Id> = Omit<TransitionGroupProps, 'ref'> & {
+export interface SelectedListProps<V extends Id = Id> extends DivProps {
     ref?: Ref<any>;
     value?: V[];
     itemProps?(value: V, index: number): AlertProps | Promise<AlertProps>;
     onClose?(value: V, index: number): void;
     sortable?: boolean;
     onSort?(value: V[]): void;
-};
+}
 export declare const SelectedList: <V extends Id = Id>(props: SelectedListProps<V>) => ReactElement;

package/dist/cjs/components/selectedList/selectedList.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 const selectedList_style_1 = require("./selectedList.style");
-const react_transition_group_1 = require("react-transition-group");
 const selectionContext_1 = require("../selectionContext");
 const selectedItem_1 = require("./selectedItem");
 const react_2 = require("@dnd-kit/react");
@@ -23,5 +22,5 @@ exports.SelectedList = (0, react_1.memo)(({ value, itemProps, onClose, sortable,
             setInnerValue?.(newValue);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(react_2.DragDropProvider, { sensors: utils_1.defaultSensors, onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { ...props, css: selectedList_style_1.style, className: (0, utils_1.clsx)(selectedList_style_1.classes.root, props.className), children: arr?.map((v, i) => (0, jsx_runtime_1.jsx)(selectedItem_1.SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler, sortable: sortable }, v)) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: selectedList_style_1.style, className: (0, utils_1.clsx)(selectedList_style_1.classes.root, props.className), children: (0, jsx_runtime_1.jsx)(react_2.DragDropProvider, { sensors: utils_1.defaultSensors, onDragEnd: dragEndHandler, children: arr?.map((v, i) => (0, jsx_runtime_1.jsx)(selectedItem_1.SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler, sortable: sortable }, v)) }) }));
 });

package/dist/cjs/components/selectedList/selectedList.style.d.ts

@@ -1,5 +1,4 @@
 export declare const classes: {
-    option: string;
     optionWrap: string;
 } & {
     root: string;

package/dist/cjs/components/selectedList/selectedList.style.js

@@ -5,7 +5,6 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const alert_style_1 = require("../alert/alert.style");
 exports.classes = (0, utils_1.defineInnerClasses)('selected-list', [
-    'option',
     'optionWrap'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `

package/dist/esm/components/selectedList/selectedItem.d.ts

@@ -1,7 +1,6 @@
 import { AlertProps } from '../alert/index.js';
 import { Id } from '../../types.js';
-import { SelectedListProps } from './selectedList.js';
-interface SelectedItemProps extends Omit<AlertProps, 'onClose'>, Pick<SelectedListProps, 'itemProps'> {
+interface SelectedItemProps extends Omit<AlertProps, 'onClose'> {
     value: Id;
     index: number;
     itemProps?(value: Id, index: number): AlertProps | Promise<AlertProps>;

package/dist/esm/components/selectedList/selectedItem.js

@@ -2,7 +2,6 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Alert } from '../alert/index.js';
 import { clsx, useLoading, useSyncState } from '../../utils/index.js';
 import { useMemo } from 'react';
-import { Collapse } from '../transitionBase/index.js';
 import { classes } from './selectedList.style.js';
 import { SortableItem } from '../sortableItem/index.js';
 export function SelectedItem({ value, index, itemProps, onClose, sortable, ...props }) {
@@ -15,5 +14,5 @@ export function SelectedItem({ value, index, itemProps, onClose, sortable, ...pr
         alertProps.current?.onClose?.(e);
         onClose?.(value, index);
     };
-    return (_jsx(Collapse, { ...props, className: classes.option, children: _jsx(SortableItem, { component: Alert, disabled: !sortable, id: value, index: index, closable: true, color: "info", showIcon: false, ...alertProps.current, className: clsx(classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
+    return (_jsx(SortableItem, { component: Alert, id: value, index: index, closable: true, color: "info", showIcon: false, ...props, ...alertProps.current, className: clsx(classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }));
 }

package/dist/esm/components/selectedList/selectedList.d.ts

@@ -1,13 +1,12 @@
 import { ReactElement, Ref } from 'react';
-import { Id } from '../../types.js';
+import { DivProps, Id } from '../../types.js';
 import { AlertProps } from '../alert/index.js';
-import { TransitionGroupProps } from 'react-transition-group/TransitionGroup';
-export type SelectedListProps<V extends Id = Id> = Omit<TransitionGroupProps, 'ref'> & {
+export interface SelectedListProps<V extends Id = Id> extends DivProps {
     ref?: Ref<any>;
     value?: V[];
     itemProps?(value: V, index: number): AlertProps | Promise<AlertProps>;
     onClose?(value: V, index: number): void;
     sortable?: boolean;
     onSort?(value: V[]): void;
-};
+}
 export declare const SelectedList: <V extends Id = Id>(props: SelectedListProps<V>) => ReactElement;

package/dist/esm/components/selectedList/selectedList.js

@@ -2,7 +2,6 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { clsx, defaultSensors, onDndDragEnd, toArray } from '../../utils/index.js';
 import { classes, style } from './selectedList.style.js';
-import { TransitionGroup } from 'react-transition-group';
 import { useSelectionContext } from '../selectionContext/index.js';
 import { SelectedItem } from './selectedItem.js';
 import { DragDropProvider } from '@dnd-kit/react';
@@ -20,5 +19,5 @@ export const SelectedList = memo(({ value, itemProps, onClose, sortable, onSort,
             setInnerValue?.(newValue);
         }
     };
-    return (_jsx(DragDropProvider, { sensors: defaultSensors, onDragEnd: dragEndHandler, children: _jsx(TransitionGroup, { ...props, css: style, className: clsx(classes.root, props.className), children: arr?.map((v, i) => _jsx(SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler, sortable: sortable }, v)) }) }));
+    return (_jsx("div", { ...props, css: style, className: clsx(classes.root, props.className), children: _jsx(DragDropProvider, { sensors: defaultSensors, onDragEnd: dragEndHandler, children: arr?.map((v, i) => _jsx(SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler, sortable: sortable }, v)) }) }));
 });

package/dist/esm/components/selectedList/selectedList.style.d.ts

@@ -1,5 +1,4 @@
 export declare const classes: {
-    option: string;
     optionWrap: string;
 } & {
     root: string;

package/dist/esm/components/selectedList/selectedList.style.js

@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils/index.js';
 import { classes as alertClasses } from '../alert/alert.style.js';
 export const classes = defineInnerClasses('selected-list', [
-    'option',
     'optionWrap'
 ]);
 export const style = defineCss(({ spacing }) => css `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.208",
+  "version": "0.0.209",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",