@canonical/react-components 1.2.4 → 1.3.0

package/dist/components/SearchAndFilter/SearchAndFilter.stories.js

@@ -1,218 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithExistingSearchData = exports.WithDataSet = exports.Default = void 0;
-var _SearchAndFilter = _interopRequireDefault(require("./SearchAndFilter"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _SearchAndFilter.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    returnSearchData: () => {},
-    filterPanelData: [{
-      id: 0,
-      heading: "Cloud",
-      chips: [{
-        lead: "Cloud",
-        value: "Google"
-      }, {
-        lead: "Cloud",
-        value: "AWS"
-      }, {
-        lead: "Cloud",
-        value: "Azure"
-      }]
-    }, {
-      id: 1,
-      heading: "Region",
-      chips: [{
-        lead: "Region",
-        value: "us-east1"
-      }, {
-        lead: "Region",
-        value: "us-north2"
-      }, {
-        lead: "Region",
-        value: "us-south3"
-      }, {
-        lead: "Region",
-        value: "us-north4"
-      }, {
-        lead: "Region",
-        value: "us-east5"
-      }, {
-        lead: "Region",
-        value: "us-south6"
-      }, {
-        lead: "Region",
-        value: "us-east7"
-      }, {
-        lead: "Region",
-        value: "us-east8"
-      }, {
-        lead: "Region",
-        value: "us-east9"
-      }, {
-        lead: "Region",
-        value: "us-east10"
-      }]
-    }, {
-      id: 2,
-      heading: "Owner",
-      chips: [{
-        lead: "Owner",
-        value: "foo"
-      }, {
-        lead: "Owner",
-        value: "bar"
-      }, {
-        lead: "Owner",
-        value: "baz"
-      }]
-    }]
-  }
-};
-const WithDataSet = exports.WithDataSet = {
-  name: "With data set",
-  args: {
-    filterPanelData: [{
-      id: 0,
-      heading: "Cloud",
-      chips: [{
-        lead: "Cloud",
-        value: "Google"
-      }, {
-        lead: "Cloud",
-        value: "AWS"
-      }, {
-        lead: "Cloud",
-        value: "Azure"
-      }]
-    }, {
-      id: 1,
-      heading: "Region",
-      chips: [{
-        lead: "Region",
-        value: "us-east1"
-      }, {
-        lead: "Region",
-        value: "us-north2"
-      }, {
-        lead: "Region",
-        value: "us-south3"
-      }, {
-        lead: "Region",
-        value: "us-north4"
-      }, {
-        lead: "Region",
-        value: "us-east5"
-      }, {
-        lead: "Region",
-        value: "us-south6"
-      }, {
-        lead: "Region",
-        value: "us-east7"
-      }, {
-        lead: "Region",
-        value: "us-east8"
-      }, {
-        lead: "Region",
-        value: "us-east9"
-      }, {
-        lead: "Region",
-        value: "us-east10"
-      }]
-    }, {
-      id: 2,
-      heading: "Owner",
-      chips: [{
-        lead: "Owner",
-        value: "foo"
-      }, {
-        lead: "Owner",
-        value: "bar"
-      }, {
-        lead: "Owner",
-        value: "baz"
-      }]
-    }],
-    returnSearchData: () => {}
-  }
-};
-const WithExistingSearchData = exports.WithExistingSearchData = {
-  name: "With existing search data",
-  args: {
-    existingSearchData: [{
-      lead: "Cloud",
-      value: "Google"
-    }],
-    filterPanelData: [{
-      id: 0,
-      heading: "Cloud",
-      chips: [{
-        lead: "Cloud",
-        value: "Google"
-      }, {
-        lead: "Cloud",
-        value: "AWS"
-      }, {
-        lead: "Cloud",
-        value: "Azure"
-      }]
-    }, {
-      id: 1,
-      heading: "Region",
-      chips: [{
-        lead: "Region",
-        value: "us-east1"
-      }, {
-        lead: "Region",
-        value: "us-north2"
-      }, {
-        lead: "Region",
-        value: "us-south3"
-      }, {
-        lead: "Region",
-        value: "us-north4"
-      }, {
-        lead: "Region",
-        value: "us-east5"
-      }, {
-        lead: "Region",
-        value: "us-south6"
-      }, {
-        lead: "Region",
-        value: "us-east7"
-      }, {
-        lead: "Region",
-        value: "us-east8"
-      }, {
-        lead: "Region",
-        value: "us-east9"
-      }, {
-        lead: "Region",
-        value: "us-east10"
-      }]
-    }, {
-      id: 2,
-      heading: "Owner",
-      chips: [{
-        lead: "Owner",
-        value: "foo"
-      }, {
-        lead: "Owner",
-        value: "bar"
-      }, {
-        lead: "Owner",
-        value: "baz"
-      }]
-    }],
-    returnSearchData: () => {}
-  }
-};

package/dist/components/SearchAndFilter/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./SearchAndFilter";
-export type { Props as SearchAndFilterProps } from "./SearchAndFilter";

package/dist/components/SearchAndFilter/types.d.ts

@@ -1,11 +0,0 @@
-export type SearchAndFilterChip = {
-    id?: number;
-    lead?: string;
-    quoteValue?: boolean;
-    value: string;
-};
-export type SearchAndFilterData = {
-    id: number;
-    chips?: SearchAndFilterChip[];
-    heading?: string;
-};

package/dist/components/SearchAndFilter/utils.d.ts

@@ -1,13 +0,0 @@
-/**
- * Return number of overflowing chips given a row threshold
- * @param {array} chips - An array of chips
- * @param {Integer} overflowRowLimit - Number of rows to show before counting
- * overflow
- */
-export declare const overflowingChipsCount: (chips: any, overflowRowLimit: any) => number;
-/**
- * Check if supplied chip object already exists in searchData prop
- * @param {Object} chip - A chip object {lead: 'foo', value: 'bar'}
- * @param {Array} existingArr - An array of chip objects
- */
-export declare const isChipInArray: (chip: any, existingArr: any) => any;

package/dist/components/SearchBox/SearchBox.d.ts

@@ -1,63 +0,0 @@
-import React, { HTMLProps } from "react";
-import type { ClassName, PropsWithSpread } from "../../types";
-export declare enum Label {
-    Clear = "Clear search field",
-    Search = "Search"
-}
-export type Props = PropsWithSpread<{
-    /**
-     * Whether autocomplete should be enabled for the search input.
-     */
-    autocomplete?: "on" | "off";
-    /**
-     * Optional classes to pass to the form element.
-     */
-    className?: ClassName;
-    /**
-     * Whether the input and buttons should be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Whether the input value will be controlled via external state.
-     */
-    externallyControlled?: boolean;
-    /**
-     * A function that will be called when the input value changes.
-     */
-    onChange?: (inputValue: string) => void;
-    /**
-     * A function that is called when the user clicks the search icon or presses enter
-     */
-    onSearch?: (inputValue: string) => void;
-    /**
-     * A function that is called when the user clicks the reset icon
-     */
-    onClear?: () => void;
-    /**
-     * A search input placeholder message.
-     */
-    placeholder?: string;
-    /**
-     * Whether the search input should lose focus when searching.
-     */
-    shouldBlurOnSearch?: boolean;
-    /**
-     * Whether the search input should receive focus after pressing the reset button
-     */
-    shouldRefocusAfterReset?: boolean;
-    /**
-     * A ref that is passed to the input element.
-     */
-    ref?: string;
-    /**
-     * The value of the search input when the state is externally controlled.
-     */
-    value?: string;
-}, HTMLProps<HTMLInputElement>>;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [SearchBox](https://docs.vanillaframework.io/patterns/search-box/).
- *
- * Search boxes enable search functionality on a page and are typically used in a navigation bar. SearchBox elements should be wrapped within a form element that handles its own submit action.
- */
-declare const SearchBox: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export default SearchBox;

package/dist/components/SearchBox/SearchBox.stories.d.ts

@@ -1,14 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import SearchBox from "./SearchBox";
-declare const meta: Meta<typeof SearchBox>;
-export default meta;
-type Story = StoryObj<typeof SearchBox>;
-export declare const Default: Story;
-export declare const Disabled: Story;
-/**
- * If you wish to control the value of the input via external state you can set
-the `externallyControlled` prop and provide an `onChange` method to update the
-state and the `value` from state.
- */
-export declare const ExternalState: Story;
-export declare const Navigation: Story;

package/dist/components/SearchBox/SearchBox.stories.js

@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Navigation = exports.ExternalState = exports.Disabled = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _SearchBox = _interopRequireDefault(require("./SearchBox"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _SearchBox.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default"
-};
-const Disabled = exports.Disabled = {
-  render: () => /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
-    disabled: true
-  }),
-  name: "Disabled"
-};
-
-/**
- * If you wish to control the value of the input via external state you can set
-the `externallyControlled` prop and provide an `onChange` method to update the
-state and the `value` from state.
- */
-const ExternalState = exports.ExternalState = {
-  render: () => /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
-    externallyControlled: true,
-    shouldRefocusAfterReset: true,
-    onChange: () => {},
-    value: "..."
-  }),
-  name: "External state"
-};
-const Navigation = exports.Navigation = {
-  render: () => /*#__PURE__*/_react.default.createElement("header", {
-    id: "navigation",
-    className: "p-navigation"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "p-navigation__row--full-width"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "p-navigation__banner"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "p-navigation__logo"
-  }, /*#__PURE__*/_react.default.createElement("a", {
-    className: "p-navigation__item",
-    href: "#test"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    className: "p-navigation__image",
-    src: "https://assets.ubuntu.com/v1/5d6da5c4-logo-canonical-aubergine.svg",
-    alt: "",
-    width: "95"
-  }))), /*#__PURE__*/_react.default.createElement("a", {
-    href: "#navigation",
-    className: "p-navigation__toggle--open",
-    title: "menu"
-  }, "Menu"), /*#__PURE__*/_react.default.createElement("a", {
-    href: "#navigation-closed",
-    className: "p-navigation__toggle--close",
-    title: "close menu"
-  }, "Close menu")), /*#__PURE__*/_react.default.createElement("nav", {
-    className: "p-navigation__nav"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "u-off-screen"
-  }, /*#__PURE__*/_react.default.createElement("a", {
-    href: "#main-content"
-  }, "Jump to main content")), /*#__PURE__*/_react.default.createElement("ul", {
-    className: "p-navigation__items",
-    role: "menu"
-  }, /*#__PURE__*/_react.default.createElement("li", {
-    className: "p-navigation__item",
-    role: "menuitem"
-  }, /*#__PURE__*/_react.default.createElement("a", {
-    href: "#test",
-    className: "p-navigation__link"
-  }, "Products")), /*#__PURE__*/_react.default.createElement("li", {
-    className: "p-navigation__item",
-    role: "menuitem"
-  }, /*#__PURE__*/_react.default.createElement("a", {
-    href: "#test",
-    className: "p-navigation__link"
-  }, "Services")), /*#__PURE__*/_react.default.createElement("li", {
-    className: "p-navigation__item",
-    role: "menuitem"
-  }, /*#__PURE__*/_react.default.createElement("a", {
-    href: "#test",
-    className: "p-navigation__link"
-  }, "Partners")), /*#__PURE__*/_react.default.createElement("li", {
-    className: "p-navigation__item",
-    role: "menuitem"
-  }, /*#__PURE__*/_react.default.createElement("a", {
-    href: "#test",
-    className: "p-navigation__link"
-  }, "About")), /*#__PURE__*/_react.default.createElement("li", {
-    className: "p-navigation__item",
-    role: "menuitem"
-  }, /*#__PURE__*/_react.default.createElement("a", {
-    href: "#test",
-    className: "p-navigation__link"
-  }, "Partners"))), /*#__PURE__*/_react.default.createElement(_SearchBox.default, null)))),
-  name: "Navigation"
-};

package/dist/components/SearchBox/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./SearchBox";
-export type { Props as SearchBoxProps } from "./SearchBox";

package/dist/components/Select/Select.d.ts

@@ -1,71 +0,0 @@
-import type { ChangeEventHandler, ReactNode, OptionHTMLAttributes, SelectHTMLAttributes } from "react";
-import type { ClassName, PropsWithSpread } from "../../types";
-type Option = OptionHTMLAttributes<HTMLOptionElement>;
-/**
- * The props for the Select component.
- */
-export type Props = PropsWithSpread<{
-    /**
-     * The content for caution validation.
-     */
-    caution?: ReactNode;
-    /**
-     * Optional class(es) to pass to the input element.
-     */
-    className?: ClassName;
-    /**
-     * The content for error validation.
-     */
-    error?: ReactNode;
-    /**
-     * Help text to show below the field.
-     */
-    help?: ReactNode;
-    /**
-     * The id of the input.
-     */
-    id?: string | null;
-    /**
-     * The label for the field.
-     */
-    label?: ReactNode;
-    /**
-     * Optional class(es) to pass to the label component.
-     */
-    labelClassName?: string | null;
-    /**
-     * Function to run when select value changes.
-     */
-    onChange?: ChangeEventHandler<HTMLSelectElement> | null;
-    /**
-     * Array of options that the select can choose from.
-     */
-    options?: Option[] | null;
-    /**
-     * Whether the field is required.
-     */
-    required?: boolean;
-    /**
-     * Whether the form field should have a stacked appearance.
-     */
-    stacked?: boolean;
-    /**
-     * The content for success validation.
-     */
-    success?: ReactNode;
-    /**
-     * Whether to focus on the input on initial render.
-     */
-    takeFocus?: boolean;
-    /**
-     * Optional class(es) to pass to the wrapping Field component
-     */
-    wrapperClassName?: ClassName;
-}, SelectHTMLAttributes<HTMLSelectElement>>;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Select](https://docs.vanillaframework.io/base/forms/#select).
- *
- * Use the Select component to create a drop-down list.
- */
-declare const Select: ({ caution, className, error, help, id, label, labelClassName, onChange, options, required, stacked, success, takeFocus, wrapperClassName, ...selectProps }: Props) => JSX.Element;
-export default Select;

package/dist/components/Select/Select.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Select from "./Select";
-declare const meta: Meta<typeof Select>;
-export default meta;
-type Story = StoryObj<typeof Select>;
-export declare const Default: Story;
-export declare const SelectMultiple: Story;

package/dist/components/Select/Select.stories.js

@@ -1,97 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SelectMultiple = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Select = _interopRequireDefault(require("./Select"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Select.default,
-  tags: ["autodocs"],
-  argTypes: {
-    caution: {
-      control: {
-        type: "text"
-      }
-    },
-    error: {
-      control: {
-        type: "text"
-      }
-    },
-    help: {
-      control: {
-        type: "text"
-      }
-    },
-    label: {
-      control: {
-        type: "text"
-      }
-    },
-    success: {
-      control: {
-        type: "text"
-      }
-    },
-    id: {
-      control: {
-        disable: true
-      }
-    },
-    options: {
-      control: {
-        disable: true
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Select",
-  args: {
-    name: "exampleSelect",
-    id: "exampleSelect2",
-    defaultValue: "",
-    options: [{
-      value: "",
-      disabled: true,
-      label: "Select an option"
-    }, {
-      value: "1",
-      label: "Cosmic Cuttlefish"
-    }, {
-      value: "2",
-      label: "Bionic Beaver"
-    }, {
-      value: "3",
-      label: "Xenial Xerus"
-    }],
-    label: "Ubuntu releases"
-  }
-};
-const SelectMultiple = exports.SelectMultiple = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Select.default, {
-    name: "exampleSelectMulti",
-    id: "exampleSelectMulti2",
-    options: [{
-      value: "",
-      disabled: true,
-      label: "Select..."
-    }, {
-      value: "1",
-      label: "Cosmic Cuttlefish"
-    }, {
-      value: "2",
-      label: "Bionic Beaver"
-    }, {
-      value: "3",
-      label: "Xenial Xerus"
-    }],
-    label: "Ubuntu releases",
-    multiple: true
-  }),
-  name: "Select multiple"
-};

package/dist/components/Select/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./Select";
-export type { Props as SelectProps } from "./Select";

package/dist/components/SideNavigation/SideNavigation.d.ts

@@ -1,50 +0,0 @@
-import React, { PropsWithChildren, ReactNode } from "react";
-import type { PropsWithSpread } from "../../types";
-import { type HTMLProps } from "react";
-import type { SideNavigationItemProps } from "./SideNavigationItem";
-import type { SideNavigationLinkDefaultElement, SideNavigationLinkProps } from "./SideNavigationLink";
-export type NavItem<L = SideNavigationLinkDefaultElement> = SideNavigationItemProps<L> | ReactNode | null;
-export type NavItemGroup<L = SideNavigationLinkDefaultElement> = NavItem<L>[];
-export type NavGroup<L = SideNavigationLinkDefaultElement> = PropsWithSpread<{
-    /**
-     * The navigation items.
-     */
-    items: NavItemGroup<L>;
-}, HTMLProps<HTMLUListElement>>;
-export type Props<L = SideNavigationLinkDefaultElement> = PropsWithSpread<{
-    /**
-     * The navigation content. This can be used instead of supplying `items`.
-     */
-    children?: PropsWithChildren["children"];
-    /**
-     * Whether to use the dark theme.
-     */
-    dark?: boolean;
-    /**
-     * Whether the navigation items contain icons.
-     */
-    hasIcons?: boolean;
-    /**
-     * The navigation items.
-     */
-    items?: (NavGroup<L> | null)[];
-    /**
-     * The component or element to use for the link elements e.g. `a` or `NavLink`.
-     * @default a
-     */
-    linkComponent?: SideNavigationLinkProps["component"];
-    /**
-     * Classes to apply to the navigation list(s).
-     */
-    listClassName?: string;
-    /**
-     * Classes to apply to the nav element.
-     */
-    navClassName?: string;
-}, HTMLProps<HTMLDivElement>>;
-/**
- * This is a [React](https://reactjs.org/) component for side navigation, used
- * in the [Vanilla](https://vanillaframework.io/docs/) layouts.
- */
-declare const SideNavigation: <L = SideNavigationLinkDefaultElement>({ children, className, dark, hasIcons, items, linkComponent, listClassName, navClassName, ...props }: Props<L>) => React.JSX.Element;
-export default SideNavigation;

package/dist/components/SideNavigation/SideNavigation.stories.d.ts

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import SideNavigation from "./SideNavigation";
-declare const meta: Meta<typeof SideNavigation>;
-export default meta;
-type Story = StoryObj<typeof SideNavigation>;
-/**
- * Menu items can be provided as links, text or custom components. To provide attributes to individual menus then each menu can be provided as a object containing an items array: `{ className: "menu-one", items: [...] }`.
- */
-export declare const Default: Story;
-/**
- * `children` can be provided instead of `items` in cases where custom content
- * is required.
- */
-export declare const CustomContent: Story;