@redsift/design-system 9.0.0-alpha.15 → 9.0.0-alpha.17

package/index.d.ts

@@ -2072,7 +2072,8 @@ type ListboxState = Readonly<{
 }>;
 declare enum ListboxActionType {
     TOGGLE = "TOGGLE",
-    SET = "SET"
+    SET = "SET",
+    UPDATE_OPTIONS = "UPDATE_OPTIONS"
 }
 type ListboxAction = {
     type: ListboxActionType.TOGGLE;
@@ -2086,6 +2087,11 @@ type ListboxAction = {
         values: string[];
         activedescendant?: [string, string];
     };
+} | {
+    type: ListboxActionType.UPDATE_OPTIONS;
+    payload: {
+        isDisabled: boolean;
+    };
 };
 type UseListboxItemProps = UseFocusWithinGroupProps & {
     isSelected?: boolean;
@@ -2185,7 +2191,7 @@ interface ItemProps extends Omit<ComponentProps<'div'>, 'onClick'>, ContainerPro
     /** Method to handle component change. */
     onClick?: (isSelected: boolean, value?: string, event?: MouseEvent<HTMLDivElement>, state?: ListboxContextProps) => void | ComponentProps<'div'>['onClick'];
     /** Value. */
-    value: string;
+    value?: string;
 }
 type StyledItemProps = Omit<ItemProps, 'color' | 'onClick' | 'value'> & {
     $isActive: ItemProps['isActive'];

package/index.js

@@ -10756,6 +10756,7 @@ const ListboxContext = /*#__PURE__*/React__default.createContext({
 let ListboxActionType = /*#__PURE__*/function (ListboxActionType) {
   ListboxActionType["TOGGLE"] = "TOGGLE";
   ListboxActionType["SET"] = "SET";
+  ListboxActionType["UPDATE_OPTIONS"] = "UPDATE_OPTIONS";
   return ListboxActionType;
 }({});
 /**
@@ -10853,7 +10854,6 @@ function useListboxItem(props) {
 function useMenuItem(props) {
   const {
     domElementRef,
-    value,
     id,
     isDisabled,
     onClick
@@ -10866,8 +10866,7 @@ function useMenuItem(props) {
   } = useFocusOnListItem({
     domElementRef,
     isDisabled: isDisabled,
-    id,
-    value
+    id
   });
   const handleKeyDown = useCallback(event => {
     const code = event.code;
@@ -10896,7 +10895,7 @@ function useMenuItem(props) {
 }
 
 const _excluded$b = ["children", "className", "defaultSelected", "id", "isActive", "isDisabled", "isHovered", "isSelected", "value"],
-  _excluded2 = ["children", "className", "id", "isActive", "isDisabled", "isHovered", "onClick", "value"];
+  _excluded2 = ["children", "className", "id", "isActive", "isDisabled", "isHovered", "onClick"];
 const COMPONENT_NAME$9 = 'Item';
 const CLASSNAME$9 = 'redsift-item';
 const DEFAULT_PROPS$9 = {};
@@ -10955,11 +10954,11 @@ const RenderedMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
       isActive,
       isDisabled: propsIsDisabled,
       isHovered,
-      onClick,
-      value
+      onClick
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded2);
-  const id = propsId !== null && propsId !== void 0 ? propsId : value;
+  const [_id] = useId$1();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const _ref = useRef();
   const divRef = ref !== null && ref !== void 0 ? ref : _ref;
   const {
@@ -10970,7 +10969,6 @@ const RenderedMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     handleClick
   } = useMenuItem({
     domElementRef: divRef,
-    value,
     id,
     isDisabled: propsIsDisabled,
     onClick: onClick
@@ -10989,7 +10987,7 @@ const RenderedMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
     ref: divRef,
     onKeyDown: handleKeyDown,
     tabIndex: tabIndex
-  }), children !== null && children !== void 0 ? children : value);
+  }), children);
 });
 
 /**
@@ -11003,6 +11001,7 @@ const Item = /*#__PURE__*/forwardRef((props, ref) => {
   const isListbox = focusContext.state.listRole === 'listbox';
   if (!focusContext.state.filter) {
     return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, props, {
+      value: props.value,
       ref: ref
     })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends$1({}, props, {
       ref: ref
@@ -11015,18 +11014,21 @@ const Item = /*#__PURE__*/forwardRef((props, ref) => {
   } = focusContext.state.filter;
   if (!filterValue) {
     return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, props, {
+      value: props.value,
       ref: ref
     })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends$1({}, props, {
       ref: ref
     }));
   } else if (caseSensitive && (type === 'startsWith' && value.startsWith(filterValue) || type === 'contains' && value.includes(filterValue) || type === 'endsWith' && value.endsWith(filterValue))) {
     return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, props, {
+      value: props.value,
       ref: ref
     })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends$1({}, props, {
       ref: ref
     }));
   } else if (!caseSensitive && (type === 'startsWith' && value.toLowerCase().startsWith(filterValue.toLowerCase()) || type === 'contains' && value.toLowerCase().includes(filterValue.toLowerCase()) || type === 'endsWith' && value.toLowerCase().endsWith(filterValue.toLowerCase()))) {
     return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends$1({}, props, {
+      value: props.value,
       ref: ref
     })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends$1({}, props, {
       ref: ref
@@ -11310,6 +11312,10 @@ const ListboxReducer = (state, action) => {
           activedescendant: action.payload.activedescendant
         });
       }
+    case ListboxActionType.UPDATE_OPTIONS:
+      {
+        return _objectSpread2(_objectSpread2({}, state), action.payload);
+      }
     default:
       return state;
   }
@@ -12685,7 +12691,9 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${TextField.className}__label`
   }, /*#__PURE__*/React__default.createElement("span", null, label)) : null, /*#__PURE__*/React__default.createElement("div", {
     className: `${TextField.className}__input-wrapper`
-  }, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({}, leftIcon, {
+  }, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({
+    color: isDisabled ? 'question' : 'black'
+  }, leftIcon, {
     "aria-hidden": "true",
     className: "left"
   })) : null, /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, {
@@ -12718,6 +12726,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   }, hasClearButton ? /*#__PURE__*/React__default.createElement(IconButton, _extends$1({
     "aria-label": "Clear",
     color: "question",
+    isDisabled: isDisabled,
     icon: mdiClose
   }, hasClearButton !== true && hasClearButton, {
     onClick: handleClear,