@ceed/ads 1.16.0-next.5 → 1.16.0-next.7

package/dist/components/FilterableCheckboxGroup/FilterableCheckboxGroup.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 interface FilterableCheckboxGroupOption {
     value: string;
     label: string;
+    disabled?: boolean;
 }
 export type FilterableCheckboxGroupProps = {
     value?: string[];
@@ -13,6 +14,7 @@ export type FilterableCheckboxGroupProps = {
     required?: boolean;
     onChange?: (value: string[]) => void;
     maxHeight?: string | number;
+    disabled?: boolean;
 };
 declare function FilterableCheckboxGroup(props: FilterableCheckboxGroupProps): React.JSX.Element;
 declare namespace FilterableCheckboxGroup {

package/dist/components/inputs/FilterableCheckboxGroup.md

@@ -177,3 +177,29 @@ function MyComponent() {
 </Typography>
 </Stack>
 ```
+
+### Disabled
+
+컴포넌트 전체 또는 특정 옵션을 비활성화할 수 있습니다.
+
+- **컴포넌트 전체 비활성화**: `disabled` prop을 사용하여 검색 input, "Select all", 모든 옵션을 비활성화합니다.
+- **특정 옵션 비활성화**: 옵션 객체의 `disabled` 속성을 사용하여 개별 옵션을 비활성화합니다.
+- **"Select all" 동작**: 비활성화된 옵션은 "Select all"의 영향을 받지 않으며, 선택 상태가 유지됩니다.
+
+```tsx
+<Stack spacing={3}>
+  <FilterableCheckboxGroup label="Entirely Disabled" placeholder="Search..." helperText="All inputs are disabled" options={defaultOptions.slice(0, 5)} disabled />
+  <FilterableCheckboxGroup label="Partially Disabled Options" placeholder="Search..." helperText="Some options are disabled" options={disabledOptions} />
+  <Stack spacing={2}>
+    <FilterableCheckboxGroup label="Controlled + Partially Disabled" placeholder="Search..." helperText="Disabled options (Banana, Date) maintain their selected state" options={disabledOptions} value={controlledValue} onChange={setControlledValue} />
+    <Typography level="body-sm">
+      Selected: {controlledValue.length > 0 ? controlledValue.join(', ') : 'None'}
+    </Typography>
+    <Typography level="body-sm" sx={{
+      color: 'text.secondary'
+    }}>
+    Try "Select all" - it will only affect enabled options (Apple, Cherry, Elderberry)
+  </Typography>
+</Stack>
+</Stack>
+```

package/dist/index.cjs

@@ -4480,7 +4480,18 @@ var import_joy43 = require("@mui/joy");
 var import_Search = __toESM(require("@mui/icons-material/Search"));
 var import_react_virtual3 = require("@tanstack/react-virtual");
 function FilterableCheckboxGroup(props) {
-  const { value, options, label, placeholder, helperText, size = "md", required, onChange, maxHeight = 300 } = props;
+  const {
+    value,
+    options,
+    label,
+    placeholder,
+    helperText,
+    size = "md",
+    required,
+    onChange,
+    maxHeight = 300,
+    disabled
+  } = props;
   const [searchTerm, setSearchTerm] = (0, import_react33.useState)("");
   const [sortedOptions, setSortedOptions] = (0, import_react33.useState)(options);
   const [internalValue, setInternalValue] = useControlledState(
@@ -4558,16 +4569,25 @@ function FilterableCheckboxGroup(props) {
   const handleSelectAll = (0, import_react33.useCallback)(
     (event) => {
       const checked = event.target.checked;
+      const enabledOptions = filteredOptions.filter((option) => !option.disabled);
+      const disabledSelectedValues = internalValue.filter(
+        (v) => filteredOptions.some((opt) => opt.value === v && opt.disabled)
+      );
       if (checked) {
-        setInternalValue(filteredOptions.map((option) => option.value));
+        const enabledValues = enabledOptions.map((option) => option.value);
+        setInternalValue([...disabledSelectedValues, ...enabledValues]);
       } else {
-        setInternalValue([]);
+        setInternalValue(disabledSelectedValues);
       }
     },
-    [filteredOptions, setInternalValue]
+    [filteredOptions, internalValue, setInternalValue]
+  );
+  const enabledFilteredOptions = (0, import_react33.useMemo)(
+    () => filteredOptions.filter((option) => !option.disabled),
+    [filteredOptions]
   );
-  const isAllSelected = filteredOptions.length > 0 && filteredOptions.every((option) => internalValue.includes(option.value));
-  const isIndeterminate = !isAllSelected && filteredOptions.some((option) => internalValue.includes(option.value));
+  const isAllSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((option) => internalValue.includes(option.value));
+  const isIndeterminate = !isAllSelected && enabledFilteredOptions.some((option) => internalValue.includes(option.value));
   return /* @__PURE__ */ import_react33.default.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ import_react33.default.createElement(FormControl_default, { required, size }, label && /* @__PURE__ */ import_react33.default.createElement(FormLabel_default, null, label), /* @__PURE__ */ import_react33.default.createElement(
     import_joy43.Input,
     {
@@ -4577,6 +4597,7 @@ function FilterableCheckboxGroup(props) {
       value: searchTerm,
       onChange: handleSearchChange,
       size,
+      disabled,
       endDecorator: /* @__PURE__ */ import_react33.default.createElement(import_Search.default, null)
     }
   ), helperText && /* @__PURE__ */ import_react33.default.createElement(FormHelperText_default, null, helperText)), filteredOptions.length === 0 ? /* @__PURE__ */ import_react33.default.createElement(
@@ -4610,6 +4631,7 @@ function FilterableCheckboxGroup(props) {
         indeterminate: isIndeterminate,
         onChange: handleSelectAll,
         size,
+        disabled,
         slotProps: {
           action: {
             sx: { top: 0, left: 0, bottom: 0, right: 0 }
@@ -4636,6 +4658,7 @@ function FilterableCheckboxGroup(props) {
             checked: internalValue.includes(option.value),
             onChange: handleCheckboxChange(option.value),
             size,
+            disabled: disabled || option.disabled,
             slotProps: {
               action: {
                 sx: { top: 0, left: 0, bottom: 0, right: 0 }
@@ -4717,7 +4740,8 @@ function FilterableCheckboxGroup2(props) {
       onChange: handleChange,
       options,
       placeholder,
-      maxHeight
+      maxHeight,
+      size: "sm"
     }
   ));
 }

package/dist/index.js

@@ -4415,7 +4415,18 @@ import { Input as Input2, Stack as Stack2 } from "@mui/joy";
 import SearchIcon from "@mui/icons-material/Search";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
 function FilterableCheckboxGroup(props) {
-  const { value, options, label, placeholder, helperText, size = "md", required, onChange, maxHeight = 300 } = props;
+  const {
+    value,
+    options,
+    label,
+    placeholder,
+    helperText,
+    size = "md",
+    required,
+    onChange,
+    maxHeight = 300,
+    disabled
+  } = props;
   const [searchTerm, setSearchTerm] = useState10("");
   const [sortedOptions, setSortedOptions] = useState10(options);
   const [internalValue, setInternalValue] = useControlledState(
@@ -4493,16 +4504,25 @@ function FilterableCheckboxGroup(props) {
   const handleSelectAll = useCallback13(
     (event) => {
       const checked = event.target.checked;
+      const enabledOptions = filteredOptions.filter((option) => !option.disabled);
+      const disabledSelectedValues = internalValue.filter(
+        (v) => filteredOptions.some((opt) => opt.value === v && opt.disabled)
+      );
       if (checked) {
-        setInternalValue(filteredOptions.map((option) => option.value));
+        const enabledValues = enabledOptions.map((option) => option.value);
+        setInternalValue([...disabledSelectedValues, ...enabledValues]);
       } else {
-        setInternalValue([]);
+        setInternalValue(disabledSelectedValues);
       }
     },
-    [filteredOptions, setInternalValue]
+    [filteredOptions, internalValue, setInternalValue]
+  );
+  const enabledFilteredOptions = useMemo12(
+    () => filteredOptions.filter((option) => !option.disabled),
+    [filteredOptions]
   );
-  const isAllSelected = filteredOptions.length > 0 && filteredOptions.every((option) => internalValue.includes(option.value));
-  const isIndeterminate = !isAllSelected && filteredOptions.some((option) => internalValue.includes(option.value));
+  const isAllSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((option) => internalValue.includes(option.value));
+  const isIndeterminate = !isAllSelected && enabledFilteredOptions.some((option) => internalValue.includes(option.value));
   return /* @__PURE__ */ React30.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ React30.createElement(FormControl_default, { required, size }, label && /* @__PURE__ */ React30.createElement(FormLabel_default, null, label), /* @__PURE__ */ React30.createElement(
     Input2,
     {
@@ -4512,6 +4532,7 @@ function FilterableCheckboxGroup(props) {
       value: searchTerm,
       onChange: handleSearchChange,
       size,
+      disabled,
       endDecorator: /* @__PURE__ */ React30.createElement(SearchIcon, null)
     }
   ), helperText && /* @__PURE__ */ React30.createElement(FormHelperText_default, null, helperText)), filteredOptions.length === 0 ? /* @__PURE__ */ React30.createElement(
@@ -4545,6 +4566,7 @@ function FilterableCheckboxGroup(props) {
         indeterminate: isIndeterminate,
         onChange: handleSelectAll,
         size,
+        disabled,
         slotProps: {
           action: {
             sx: { top: 0, left: 0, bottom: 0, right: 0 }
@@ -4571,6 +4593,7 @@ function FilterableCheckboxGroup(props) {
             checked: internalValue.includes(option.value),
             onChange: handleCheckboxChange(option.value),
             size,
+            disabled: disabled || option.disabled,
             slotProps: {
               action: {
                 sx: { top: 0, left: 0, bottom: 0, right: 0 }
@@ -4652,7 +4675,8 @@ function FilterableCheckboxGroup2(props) {
       onChange: handleChange,
       options,
       placeholder,
-      maxHeight
+      maxHeight,
+      size: "sm"
     }
   ));
 }