@canlooks/can-ui 0.0.207 → 0.0.208

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

@@ -6,6 +6,7 @@ interface SelectedItemProps extends Omit<AlertProps, 'onClose'>, Pick<SelectedLi
     index: number;
     itemProps?(value: Id, index: number): AlertProps | Promise<AlertProps>;
     onClose?(value: Id, index: number): void;
+    sortable?: boolean;
 }
-export declare function SelectedItem({ value, index, itemProps, onClose, ...props }: SelectedItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function SelectedItem({ value, index, itemProps, onClose, sortable, ...props }: SelectedItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,7 +8,7 @@ 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, ...props }) {
+function SelectedItem({ value, index, itemProps, onClose, sortable, ...props }) {
     const [alertProps, setAlertProps] = (0, utils_1.useSyncState)();
     const [loading, requestFn] = (0, utils_1.useLoading)(async () => {
         itemProps && setAlertProps(await itemProps(value, index));
@@ -18,5 +18,5 @@ function SelectedItem({ value, index, itemProps, onClose, ...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, 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)(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 }) }));
 }

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

@@ -7,6 +7,7 @@ export type SelectedListProps<V extends Id = Id> = Omit<TransitionGroupProps, 'r
     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

@@ -9,7 +9,7 @@ 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");
-exports.SelectedList = (0, react_1.memo)(({ value, itemProps, onClose, onSort, ...props }) => {
+exports.SelectedList = (0, react_1.memo)(({ value, itemProps, onClose, sortable, onSort, ...props }) => {
     const { value: innerValue, setValue: setInnerValue } = (0, selectionContext_1.useSelectionContext)();
     const arr = (0, utils_1.toArray)(value || innerValue);
     const closeHandler = (v, i) => {
@@ -23,5 +23,5 @@ exports.SelectedList = (0, react_1.memo)(({ value, itemProps, onClose, onSort, .
             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 }, v)) }) }));
+    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)) }) }));
 });

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

@@ -12,6 +12,10 @@ exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
     @layer override {
         .${exports.classes.optionWrap} {
             margin-bottom: ${spacing[3]}px;
+            
+            &[data-draggable=true] {
+                cursor: grab;
+            }
         }
 
         .${alert_style_1.classes.title}, .${alert_style_1.classes.description} {

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

@@ -6,6 +6,7 @@ interface SelectedItemProps extends Omit<AlertProps, 'onClose'>, Pick<SelectedLi
     index: number;
     itemProps?(value: Id, index: number): AlertProps | Promise<AlertProps>;
     onClose?(value: Id, index: number): void;
+    sortable?: boolean;
 }
-export declare function SelectedItem({ value, index, itemProps, onClose, ...props }: SelectedItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function SelectedItem({ value, index, itemProps, onClose, sortable, ...props }: SelectedItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,7 +5,7 @@ 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, ...props }) {
+export function SelectedItem({ value, index, itemProps, onClose, sortable, ...props }) {
     const [alertProps, setAlertProps] = useSyncState();
     const [loading, requestFn] = useLoading(async () => {
         itemProps && setAlertProps(await itemProps(value, index));
@@ -15,5 +15,5 @@ export function SelectedItem({ value, index, itemProps, onClose, ...props }) {
         alertProps.current?.onClose?.(e);
         onClose?.(value, index);
     };
-    return (_jsx(Collapse, { ...props, className: classes.option, children: _jsx(SortableItem, { component: Alert, 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(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 }) }));
 }

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

@@ -7,6 +7,7 @@ export type SelectedListProps<V extends Id = Id> = Omit<TransitionGroupProps, 'r
     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

@@ -6,7 +6,7 @@ import { TransitionGroup } from 'react-transition-group';
 import { useSelectionContext } from '../selectionContext/index.js';
 import { SelectedItem } from './selectedItem.js';
 import { DragDropProvider } from '@dnd-kit/react';
-export const SelectedList = memo(({ value, itemProps, onClose, onSort, ...props }) => {
+export const SelectedList = memo(({ value, itemProps, onClose, sortable, onSort, ...props }) => {
     const { value: innerValue, setValue: setInnerValue } = useSelectionContext();
     const arr = toArray(value || innerValue);
     const closeHandler = (v, i) => {
@@ -20,5 +20,5 @@ export const SelectedList = memo(({ value, itemProps, onClose, onSort, ...props
             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 }, v)) }) }));
+    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)) }) }));
 });

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

@@ -9,6 +9,10 @@ export const style = defineCss(({ spacing }) => css `
     @layer override {
         .${classes.optionWrap} {
             margin-bottom: ${spacing[3]}px;
+            
+            &[data-draggable=true] {
+                cursor: grab;
+            }
         }
 
         .${alertClasses.title}, .${alertClasses.description} {

package/package.json

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