@thecb/components 10.12.3-beta.0 → 10.12.3

package/src/components/atoms/icons/Icons.stories.js

@@ -1,325 +0,0 @@
-import * as icons from "./index";
-import styled from "styled-components";
-import { MANATEE_GREY } from "../../../constants/colors";
-
-const meta = {
-  title: "Atoms/Icons",
-  component: icons.AccountsIcon,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["!autodocs"],
-  args: {
-    ariaLabel: undefined,
-    color: undefined,
-    colorOverride: undefined,
-    fill: undefined,
-    height: undefined,
-    iconFill: undefined,
-    iconHeight: undefined,
-    iconIndex: undefined,
-    iconWidth: undefined,
-    labelledBy: undefined,
-    linkColor: undefined,
-    strokeWidth: undefined,
-    text: undefined,
-    title: undefined,
-    titleID: undefined
-  },
-  argTypes: {
-    ariaLabel: {
-      description: "Sets the `aria-label` value on the `PencilIcon` icon",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "Edit" }
-      }
-    },
-    color: {
-      description:
-        "Sets a color (usually for a `fill` attribute) on one or many elements within a component. The default value for this prop varies by component. Used in the following componenets: `ArrowDownCircleIconSmall`, `ArrowLeftCircleIconMedium`, `ArrowLeftCircleIconSmall`, `ArrowRightCircleIconSmall`, `ArrowUpCircleIconSmall`, `AutopayOnIcon`, `ChargebackIconMedium`, `ChargebackIconSmall`, `ChargebackReversalIconMedium`, `ChargebackReversalIconSmall`, `RefundIconMedium`, `RefundIconSmall`, `XCircleIconMedium`, `XCircleIconSmall`, `AutopayIcon`, `ArrowRightIcon`, `PlusCircleIcon`, `WarningIconXS`, `EmptyCartIconV2`",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: `varies` }
-      }
-    },
-    colorOverride: {
-      description:
-        "Overrides the theme values for some element's fill attribute in the `WalletIconSmall` component",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    fill: {
-      description:
-        "Sets the fill attribute in the following components: `AutopayIcon`, `IconQuitLarge`, `PendingIcon`",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: `varies` }
-      }
-    },
-    height: {
-      description:
-        "Sets the `height` value in the `style` attribute for the `EmptyCartIconV2` component",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "auto" }
-      }
-    },
-    iconFill: {
-      description:
-        "Sets the fill attribute in the following components: `ChevronIcon`, `TrashIcon`, `TrashIconV2`, `CloseIcon`, `MultiCartIcon`",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: `varies` }
-      }
-    },
-    iconHeight: {
-      description:
-        "Sets the height of the `CloseIcon` and `MultiCartIcon` icons",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: `varies` }
-      }
-    },
-    iconIndex: {
-      description:
-        "Used to create a unique id for a variety of elements in the following components: `BankIconLarge`, `SuccessfulIconMedium`, `SuccessfulIconSmall`, `WarningIconXS`, `XCircleIconSmall`, `XCircleIconMedium`, `RefundIconSmall`, `RefundIconMedium`, `ChargebackReversalIconSmall`, `ChargebackReversalIconMedium`, `ChargebackIconSmall`, `ChargebackIconMedium`, `AutopayOnIcon`, `ArrowUpCircleIconSmall`, `ArrowRightCircleIconSmall`, `ArrowLeftCircleIconSmall`, `ArrowLeftCircleIconMedium`, `ArrowDownCircleIconSmall`, `WalletIconSmall`, `FindIconSmall`",
-      table: {
-        type: { summary: "string | number" },
-        defaultValue: { summary: 0 }
-      }
-    },
-    iconWidth: {
-      description:
-        "Sets the width of the `CloseIcon` and `MultiCartIcon` icons",
-      table: {
-        type: { summary: "string | number" },
-        defaultValue: { summary: `varies` }
-      }
-    },
-    labelledBy: {
-      description:
-        "Sets the `aria-labelledby` value in the following components: `ArrowRightIcon`, `PlusCircleIcon`",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    linkColor: {
-      description:
-        "Sets the fill attribute on multiple elements in the `ExternalLinkIcon` component",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    strokeWidth: {
-      description: "Set the stroke width on the circle in `IconAdd`",
-      table: {
-        type: { summary: "string | number" },
-        defaultValue: { summary: 1 }
-      }
-    },
-    text: {
-      description:
-        "Used to create a unique id for a `<mask />` element in `ExternalLinkIcon`",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    title: {
-      description:
-        "Sets the text of the `<title />` element in the `WarningIconXS` component",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    titleID: {
-      description:
-        "Used to build a unique id for the `<title />` element in the `WarningIconXS` component, which is matched with the `aria-labelledby` value",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "warning-icon-title" }
-      }
-    }
-  }
-};
-
-const StyledIconLIst = styled.ul`
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  gap: 2em;
-  list-style: none;
-
-  li {
-    padding-bottom: 2em;
-    text-align: center;
-    width: 100%;
-
-    &:not(:last-child) {
-      border-bottom: 1px solid ${MANATEE_GREY};
-    }
-  }
-
-  .icon-name {
-    margin-top: 1em;
-    font-family: monospace
-    font-size: 2em;
-  }
-
-  // for the IconAdd component
-  .fill { fill: ${MANATEE_GREY} }
-  .stroke { stroke: ${MANATEE_GREY} }
-`;
-
-const IconList = ({ iconNames }) => (
-  <StyledIconLIst>
-    {iconNames.map(icon => (
-      <li key={icon} style={{ textAlign: "center", paddingBottom: "2em" }}>
-        {icons[icon]({ linkColor: MANATEE_GREY })}
-        <div className="icon-name">{icon}</div>
-      </li>
-    ))}
-  </StyledIconLIst>
-);
-
-const genericIcons = [
-  "DuplicateIcon",
-  "CalendarIcon",
-  "PendingIcon",
-  "StatusUnknownIcon",
-  "FailedIcon",
-  "ErroredIcon",
-  "SuccessfulIcon",
-  "SuccessfulIconMedium",
-  "SuccessfulIconSmall",
-  "VoidedIcon",
-  "XCircleIconMedium",
-  "XCircleIconSmall",
-  "ProfileIconSmall",
-  "SearchIcon",
-  "FindIconSmall",
-  "PencilIcon",
-  "AccountsIconSmall",
-  "TrashIcon",
-  "TrashIconV2",
-  "SettingsIconSmall",
-  "ShoppingCartIcon",
-  "PlusCircleIcon",
-  "IconAdd",
-  "ExternalLinkIcon",
-  "AutopayIcon",
-  "AutopayOnIcon",
-  "CloseIcon",
-  "IconQuitLarge",
-  "WarningIconXS",
-  "KebabMenuIcon",
-  "MultiCartIcon",
-  "EmptyCartIconV2",
-  "CheckmarkIcon"
-];
-
-const arrowIcons = [
-  "AchReturnIcon",
-  "RejectedIcon",
-  "RejectedVelocityIcon",
-  "ArrowDownCircleIconSmall",
-  "ArrowLeftCircleIconMedium",
-  "ArrowLeftCircleIconSmall",
-  "ArrowRightCircleIconSmall",
-  "ArrowUpCircleIconSmall",
-  "ArrowRightIcon",
-  "ChevronIcon",
-  "CarrotIcon"
-];
-
-const paymentIcons = [
-  "BankIcon",
-  "BankIconLarge",
-  "CashIcon",
-  "ChargebackIcon",
-  "ChargebackIconMedium",
-  "ChargebackIconSmall",
-  "ChargebackReversalIcon",
-  "ChargebackReversalIconMedium",
-  "ChargebackReversalIconSmall",
-  "CheckIcon",
-  "GenericCard",
-  "GenericCardLarge",
-  "PaymentMethodAddIcon",
-  "PaymentMethodIcon",
-  "PaymentsIconSmall",
-  "RefundIcon",
-  "RefundIconMedium",
-  "RefundIconSmall"
-];
-
-const checkIcons = ["RoutingNumberImage", "AccountNumberImage"];
-
-const accountIcons = [
-  "AccountsAddIcon",
-  "AccountsIcon",
-  "DisabledAccountsAddIcon",
-  "DisabledPaymentMethodsAddIcon",
-  "ForgotPasswordIcon",
-  "GoToEmailIcon",
-  "ResetPasswordIcon",
-  "VerifiedEmailIcon"
-];
-
-const mascotIcons = [
-  "CustomerSearchIcon",
-  "EmptyCartIcon",
-  "GenericErrorIcon",
-  "NoCustomerResultsIcon",
-  "NoPaymentResultsIcon",
-  "NotFoundIcon",
-  "PaymentSearchIcon",
-  "PeriscopeFailedIcon",
-  "ProfileIcon",
-  "TimeoutImage",
-  "WalletIcon",
-  "GuidedCheckoutImage",
-  "KioskImage",
-  "PointOfSaleImage",
-  "RevenueManagementImage",
-  "ProfileImage",
-  "StandardCheckoutImage",
-  "WalletBannerIcon"
-];
-
-export const GenericIcons = () => <IconList iconNames={genericIcons} />;
-
-export const ArrowIcons = () => <IconList iconNames={arrowIcons} />;
-
-export const PaymentIcons = () => <IconList iconNames={paymentIcons} />;
-
-export const CheckIcons = () => <IconList iconNames={checkIcons} />;
-
-export const AccountIcons = () => <IconList iconNames={accountIcons} />;
-
-export const MascotIcons = () => <IconList iconNames={mascotIcons} />;
-
-export const OtherIcons = {
-  render: () => {
-    const groupedIcons = [
-      ...checkIcons,
-      ...mascotIcons,
-      ...arrowIcons,
-      ...genericIcons,
-      ...accountIcons,
-      ...paymentIcons
-    ];
-    const otherIcons = Object.keys(icons).filter(
-      icon => !groupedIcons.includes(icon)
-    );
-
-    return <IconList iconNames={otherIcons} />;
-  }
-};
-
-export default meta;

package/src/components/atoms/labeled-amount/LabeledAmount.mdx

@@ -1,23 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as LabeledAmountStories from './LabeledAmount.stories.js';
-
-<Meta of={LabeledAmountStories} />
-
-<Title />
-
-The LabeledAmount component is a component that combines a text label with a formatted money string, for use in checkout experiences (payment details, receipts, etc). The wrapping container for the text elements is styled using flexbox, by default using the  `space-between` value for the `justify-content` property. This can be changed by passing an override using the `extraStyles` prop like so:
-
-```
- <LabeledAmount extraStyles={`justify-content: space-around`} />
-```
-
-Currently, there are two versions of this component: LabeledAmountV1 and LabeledAmountV2. While both versions are in active use in the codebase, LabeledAmountV1 is deprecated and should not be used in new code. The difference between the two is that LabeledAmountV2 has been updated to decouple the component's rendered HTML element from its theme size variant. This allows for arbitrary HTML elements (any heading size, paragraph, span) to be used as the underlying element regardless of the component size specified in the design, preserving proper HTML semantics and accessibility.
-
-LabeledAmountV2 takes the following props:
-
-<Controls />
-
-<div style={{ marginBottom: "2em"}}>
-    <Story />
-</div>

package/src/components/atoms/line-item/LineItem.mdx

@@ -1,28 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as LineItemStories from './LineItem.stories.js';
-
-<Meta of={LineItemStories} />
-
-<Title />
-
-The LineItem component is small component that formats the description, subDescription, amount, and optionally quantity of a line item. LineItems are typically used in checkout flows and as a part of transaction details.
-
-The default styling of the LineItem uses flexbox. The description and subDescription are left-justified, while the formatted amount string is right-justified. An item's quantity, if displayed, sits evenly between the description and amount string. By default, elements of the LineItem have no gap between them. As shown below, the LineItem sizes itself to the width of its parent container, so gaps between items can be controlled by the size of the LineItem's parent.
-
-LineItems are typically rendered inside of other display components, like a DisplayBox or Card, as seen in the Line Item With Quantity story.
-
-The LineItem component can take the following props:
-
-- description (required, main description of the lineItem),
-- subDescription (optional, but should not be `null`),
-- amount (required, pre-formatted money string),
-- displayQuantity (optional, quantity of the item, if its display is desired)
-- customAttributes (optional, array of item's custom attributes, used in conjunction with visibleFields)
-- visibleFields (optional, an array that is a subset of customAttributes to display below the subDescription)
-
-NOTE: The LineItem currently supports unused functionality that can display a subset of an item's custom attributes as "visible fields". If this functionality is used in the future, a new story should be added to demonstrate it.
-
-<div style={{ marginBottom: "2em"}}>
-    <Story />
-</div>

package/src/components/atoms/link/Link.mdx

@@ -1,19 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as LinkStories from './Link.stories.js';
-
-<Meta of={LinkStories} />
-
-<Title />
-
-The Link component comes in two varieties: InternalLink and ExternalLink. We have two components because most of our frontend applications rely on some version of react-router for internal routing. The InternalLink component is a wrapper that applies react-router-dom's `<Link />` component, while ExternalLink uses a plain `<a />` tag. Either link component can be used as a wrapper around arbitrary children.
-
-Due to the components being written at different times, they have similar, but not identical, props. The props table identifies which props apply to InternalLinks and which apply to ExternalLinks.
-
-Currently, the InternalLink has a minor bug where it will not apply a theme color for a non-active, non-hover state. At the moment, the only way to get InternalLinks to apply the correct color is to pass the theme color in to the component using the `color` prop.
-
-<Controls />
-
-<div style={{ marginBottom: "2em"}}>
-    <Story />
-</div>

package/src/components/atoms/loading/Loading.mdx

@@ -1,13 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as LoadingStories from './Loading.stories.js';
-
-<Meta of={LoadingStories} />
-
-<Title />
-
-The Loading component is a small spinner animation that can be used to signal a loading state to a user. The spinner has a fixed size of 100px, and it is themed using the theme values in FCS. For a customizable size version, use the Spinner atom directly.
-
-<Story />
-
-<Controls />

package/src/components/atoms/loading/Loading.stories.js

@@ -1,22 +0,0 @@
-import Loading from "./Loading";
-import { Box } from "../layouts";
-
-const meta = {
-  title: "Atoms/Loading",
-  component: Loading,
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  tags: ["!autodocs"]
-};
-
-export default meta;
-
-export const Spinner = {
-  render: () => (
-    <Box>
-      <Loading />
-    </Box>
-  )
-};

package/src/components/atoms/loading-line/LoadingLine.mdx

@@ -1,15 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as LoadingLineStories from './LoadingLine.stories.js';
-
-<Meta of={LoadingLineStories} />
-
-<Title />
-
-The LoadingLine is a component with a gray ripple animation that can be used in place of an existing component as it renders. The LoadingLine can either be given an exact width and height using pixel strings, or it can be given an maximum and minimum width. If supplied with a maximum and minimum width, the component will have a random width within the range. Width values should be supplied as pixel values _without_ the "px" suffix. All supplied values will be applied as pixels in the component's style function.
-
-Using the minimum and maximum width values can be useful to represent a series of items without a fixed width, like text content, list items, or table values.
-
-<Story />
-
-<Controls />

package/src/components/atoms/nav-footer/NavFooter.mdx

@@ -1,15 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as NavFooterStories from './NavFooter.stories.js';
-
-<Meta of={NavFooterStories} />
-
-<Title />
-
-The NavFooter component is a wrapper designed to create a page footer. The component accepts children components for its left and right side and sizes itself to the width of the page. The component can take a maxWidth value that will center the footer within it, no matter the overall size of the screen.
-
-The NavFooter can also be used to create a smaller subfooter by changing the minimum height value. Multiple footers can exist on one page, as long as they have proper key and aria-label values. The `largeSide` and `largeSideSize` props dictate which side of the footer is given more flex space.
-
-<Controls />
-
-<Story />

package/src/components/atoms/nav-header/NavHeader.mdx

@@ -1,13 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as NavHeaderStories from './NavHeader.stories.js';
-
-<Meta of={NavHeaderStories} />
-
-<Title />
-
-The NavHeader component is a wrapper designed to create a page header. The component accepts children components for its left and right side and sizes itself to the width of the page. The component can take a maxWidth value that will center the header within it, no matter the overall size of the screen.
-
-<Controls />
-
-<Story />

package/src/components/atoms/nav-tabs/NavTabs.mdx

@@ -1,30 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as NavTabsStories from './NavTabs.stories.js';
-
-<Meta of={NavTabsStories} />
-
-<Title />
-
-The NavTabs component renders a configurable row of links on desktop, and a stack of links on mobile.
-
-- The links are horizontally centered
-- Each tab uses the `InternalLink` component, which uses the `Link` component from `react-router-dom`. 
-- The current, or active, page is determined by checking if `location.pathname` from the `useLocation` hook from `react-router-dom` includes a tab's `path`.
-- There is no default gap between links on desktop, so it's recommended to always provide a value for `tabGap`.
-- The font, link color, and active color are themeable.
-- Expands to fit the width of it's containing element.
-
-## Example `tabsConfig` Format
-
-```
-const tabs = [
-  { label: "Home", path: "/" },
-  { label: "About", path: "/about" },
-  { label: "Contact", path: "/contact" }
-];
-```
-
-<Story />
-
-<Controls />

package/src/components/atoms/nav-tabs/NavTabs.stories.js

@@ -1,49 +0,0 @@
-import NavTabs from "./NavTabs";
-
-const meta = {
-  title: "Atoms/NavTabs",
-  component: NavTabs,
-  tags: ["!autodocs"],
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  args: {
-    tabsConfig: undefined,
-    tabGap: undefined
-  },
-  argTypes: {
-    tabsConfig: {
-      description: "Array of tab objects",
-      control: { type: "object" },
-      table: {
-        type: { summary: "array" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    tabGap: {
-      description:
-        "Gap between tabs. Passed to the Cluster component that wraps the tabs on desktop screens.",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  }
-};
-
-const tabs = [
-  { label: "Home", path: "/" },
-  { label: "About", path: "/about" },
-  { label: "Contact", path: "/contact" }
-];
-
-export default meta;
-
-export const Basic = {
-  args: {
-    tabsConfig: tabs,
-    tabGap: "2rem"
-  }
-};

package/src/components/atoms/password-requirements/PasswordRequirements.mdx

@@ -1,39 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as PasswordRequirementsStories from './PasswordRequirements.stories.js';
-
-<Meta of={PasswordRequirementsStories} />
-
-<Title />
-
-PasswordRequirements is a small widget that can be used in addition to a form that requires a user to set a password. The widget displays a box listing requirements for the user's password, and whether the entered password meets those requirements.
-
-The requirements are currently hardcoded to meet the requirements for Navigate Frontend: passwords must be a minimum length of 8 characters and contain a number, uppercase letter, lowercase letter, and special character. Requirements can be changed or added to by modifying the code in the PasswordRequirements component.
-
-This component is *not* to be used with applications that support Okta SSO for user authentication, _unless_ they also support non-SSO-sign-on using User Management Service. For applications that exclusively use Okta SSO to manage user authentication, Okta provides its own password validation experience that can be used wholesale or forked.
-
-
-## Form Integration
-
-In order to properly demonstrate functionality, the PasswordRequirements story includes two FormInput components and Redux Freeform integration. The `password` prop required by PasswordRequirements takes the form of a Redux Freeform field object. This object _can_ be generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform). Below are example values for each prop with the minimum properties needed for a password field object.
-
-### field
-
-```
-{
-  "dirty": false,
-  "rawValue": "",
-  "errors": [
-    "error/REQUIRED",
-    "error/HAS_LENGTH",
-    "error/HAS_NUMBER",
-    "error/HAS_UPPERCASE_LETTER",
-    "error/HAS_LOWERCASE_LETTER",
-    "error/HAS_SPECIAL_CHARACTER"
-  ],
-  "hasErrors": true
-}
-```
-<Controls />
-
-<Story />

package/src/components/atoms/placeholder/Placeholder.mdx

@@ -1,19 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as PlaceholderStories from './Placeholder.stories.js';
-
-<Meta of={PlaceholderStories} />
-
-<Title />
-
-The Placeholder component is a component that is used to occupy space that would normally contain some sort of data, like user accounts or payment methods. When the data is in an empty state, the Placeholder can be rendered to inform the user about what content would normally appear, and provide the user with an opportunity to take an action or visit a destination. If the action is unavailable, a Placeholder can be set to a disabled state.
-
-Placeholders come with two variants: default and large. The default variant uses only text and a generic plus icon, while the large variant displays text and an icon specific to the Placeholder's use. Currently large Placeholders are only used in NFE in the following varieties: accounts, properties, and payments. New types of large Placeholders can be added by updating the large icons function inside of the Placeholder component.
-
-The Placeholder uses flexbox styling and takes its width from its parent container.
-
-<Controls />
-
-<div style={{ marginBottom: "2em"}}>
-    <Story />
-</div>

package/src/components/atoms/searchable-select/SearchableSelect.mdx

@@ -1,44 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as SearchableSelectStories from './SearchableSelect.stories.js';
-
-<Meta of={SearchableSelectStories} />
-
-<Title />
-
-SearchableSelect creates a list of checkboxes from an array of options that is filterable through an input.
-
-## Notes
-
-- the `items` array will be sorted by the `name` property
-- a `SELECT_ALL` constant is also exported by SearchableSelect
-- if an item with a name matching `SELECT_ALL` is included in `items` it will be rendered to the top
-- filtering through the input is _always_ case-insensitive
-
-## Form Integration
-
-SearchableSelect requires a `fields` and `actions` prop. Both are objects that _can_ be generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform).
-
-Unlike other similar form components where the specific `field` and `fieldActions` for one field are passed as props, SearchableSelect expect the `fields` and `fieldActions` from the entire form to be passed, with a field named `searchTerm`. Below are example values for each prop with the minimum properties needed for a FormSelect component.
-
-### fields
-
-```
-{
-  searchTerm: {
-    "rawValue": ""
-  }
-}
-```
-
-### actions
-
-```
-{
-  searchTerm: {
-    set: (value) => {...}
-  }
-}
-```
-
-`actions.searchTerm.set()` is used to to update the filter term in the input.