@canonical/react-components 1.6.0 → 1.7.0

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

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

package/dist/esm/components/SearchAndFilter/index.js

@@ -0,0 +1 @@
+export { default } from "./SearchAndFilter";

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

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

package/dist/esm/components/SearchAndFilter/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,13 @@
+/**
+ * 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/esm/components/SearchAndFilter/utils.js

@@ -0,0 +1,22 @@
+/**
+ * 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 var overflowingChipsCount = (chips, overflowRowLimit) => {
+  var overflowChips = 0;
+  if (chips) {
+    chips.forEach(chip => {
+      if (chip.offsetTop > chip.offsetHeight * overflowRowLimit) overflowChips++;
+    });
+  }
+  return overflowChips;
+};
+
+/**
+ * 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 var isChipInArray = (chip, existingArr) => existingArr === null || existingArr === void 0 ? void 0 : existingArr.some(searchDataItem => searchDataItem.lead === chip.lead && searchDataItem.value === chip.value);

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

@@ -0,0 +1,63 @@
+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/esm/components/SearchBox/SearchBox.js

@@ -0,0 +1,95 @@
+var _excluded = ["autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "onClear", "placeholder", "shouldBlurOnSearch", "shouldRefocusAfterReset", "value"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React, { useRef } from "react";
+import Icon from "../Icon";
+export var Label = /*#__PURE__*/function (Label) {
+  Label["Clear"] = "Clear search field";
+  Label["Search"] = "Search";
+  return Label;
+}({});
+/**
+ * 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.
+ */
+var SearchBox = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
+  var {
+      autocomplete = "on",
+      className,
+      disabled,
+      externallyControlled,
+      onChange: _onChange,
+      onSearch,
+      onClear,
+      placeholder = "Search",
+      shouldBlurOnSearch = true,
+      shouldRefocusAfterReset,
+      value
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var internalRef = useRef();
+  var resetInput = () => {
+    _onChange === null || _onChange === void 0 || _onChange("");
+    onClear === null || onClear === void 0 || onClear();
+    if (internalRef.current) {
+      internalRef.current.value = "";
+      if (shouldRefocusAfterReset) internalRef.current.focus();
+    }
+  };
+  var triggerSearch = () => {
+    onSearch === null || onSearch === void 0 || onSearch(externallyControlled ? value : internalRef.current.value);
+  };
+  var onKeyDown = e => {
+    if (e.key === "Enter" && internalRef.current.checkValidity()) {
+      if (shouldBlurOnSearch) {
+        internalRef.current.blur();
+      }
+      triggerSearch();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("p-search-box", className)
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "u-off-screen",
+    htmlFor: "search"
+  }, placeholder || "Search"), /*#__PURE__*/React.createElement("input", _extends({
+    autoComplete: autocomplete,
+    className: "p-search-box__input",
+    disabled: disabled,
+    id: "search",
+    name: "search",
+    onChange: evt => _onChange === null || _onChange === void 0 ? void 0 : _onChange(evt.target.value),
+    onKeyDown: onKeyDown,
+    placeholder: placeholder,
+    ref: input => {
+      internalRef.current = input;
+      // Handle both function and object refs.
+      if (typeof forwardedRef === "function") {
+        forwardedRef(input);
+      } else if (forwardedRef) {
+        forwardedRef.current = input;
+      }
+    },
+    type: "search",
+    defaultValue: externallyControlled ? undefined : value,
+    value: externallyControlled ? value : undefined
+  }, props)), value && /*#__PURE__*/React.createElement("button", {
+    className: "p-search-box__reset",
+    disabled: disabled,
+    onClick: resetInput,
+    type: "reset"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "close"
+  }, Label.Clear)), /*#__PURE__*/React.createElement("button", {
+    className: "p-search-box__button",
+    disabled: disabled,
+    onClick: triggerSearch
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "search"
+  }, Label.Search)));
+});
+SearchBox.displayName = "SearchBox";
+export default SearchBox;

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

@@ -0,0 +1,14 @@
+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/esm/components/SearchBox/SearchBox.stories.js

@@ -0,0 +1,99 @@
+import React from "react";
+import SearchBox from "./SearchBox";
+var meta = {
+  component: SearchBox,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  name: "Default"
+};
+export var Disabled = {
+  render: () => /*#__PURE__*/React.createElement(SearchBox, {
+    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.
+ */
+export var ExternalState = {
+  render: () => /*#__PURE__*/React.createElement(SearchBox, {
+    externallyControlled: true,
+    shouldRefocusAfterReset: true,
+    onChange: () => {},
+    value: "..."
+  }),
+  name: "External state"
+};
+export var Navigation = {
+  render: () => /*#__PURE__*/React.createElement("header", {
+    id: "navigation",
+    className: "p-navigation"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-navigation__row--full-width"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-navigation__banner"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-navigation__logo"
+  }, /*#__PURE__*/React.createElement("a", {
+    className: "p-navigation__item",
+    href: "#test"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "p-navigation__image",
+    src: "https://assets.ubuntu.com/v1/5d6da5c4-logo-canonical-aubergine.svg",
+    alt: "",
+    width: "95"
+  }))), /*#__PURE__*/React.createElement("a", {
+    href: "#navigation",
+    className: "p-navigation__toggle--open",
+    title: "menu"
+  }, "Menu"), /*#__PURE__*/React.createElement("a", {
+    href: "#navigation-closed",
+    className: "p-navigation__toggle--close",
+    title: "close menu"
+  }, "Close menu")), /*#__PURE__*/React.createElement("nav", {
+    className: "p-navigation__nav"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "u-off-screen"
+  }, /*#__PURE__*/React.createElement("a", {
+    href: "#main-content"
+  }, "Jump to main content")), /*#__PURE__*/React.createElement("ul", {
+    className: "p-navigation__items",
+    role: "menu"
+  }, /*#__PURE__*/React.createElement("li", {
+    className: "p-navigation__item",
+    role: "menuitem"
+  }, /*#__PURE__*/React.createElement("a", {
+    href: "#test",
+    className: "p-navigation__link"
+  }, "Products")), /*#__PURE__*/React.createElement("li", {
+    className: "p-navigation__item",
+    role: "menuitem"
+  }, /*#__PURE__*/React.createElement("a", {
+    href: "#test",
+    className: "p-navigation__link"
+  }, "Services")), /*#__PURE__*/React.createElement("li", {
+    className: "p-navigation__item",
+    role: "menuitem"
+  }, /*#__PURE__*/React.createElement("a", {
+    href: "#test",
+    className: "p-navigation__link"
+  }, "Partners")), /*#__PURE__*/React.createElement("li", {
+    className: "p-navigation__item",
+    role: "menuitem"
+  }, /*#__PURE__*/React.createElement("a", {
+    href: "#test",
+    className: "p-navigation__link"
+  }, "About")), /*#__PURE__*/React.createElement("li", {
+    className: "p-navigation__item",
+    role: "menuitem"
+  }, /*#__PURE__*/React.createElement("a", {
+    href: "#test",
+    className: "p-navigation__link"
+  }, "Partners"))), /*#__PURE__*/React.createElement(SearchBox, null)))),
+  name: "Navigation"
+};

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

@@ -0,0 +1 @@
+export {};

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

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

package/dist/esm/components/SearchBox/index.js

@@ -0,0 +1 @@
+export { default } from "./SearchBox";

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

@@ -0,0 +1,71 @@
+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/esm/components/Select/Select.js

@@ -0,0 +1,84 @@
+var _excluded = ["label", "value"],
+  _excluded2 = ["caution", "className", "error", "help", "id", "label", "labelClassName", "onChange", "options", "required", "stacked", "success", "takeFocus", "wrapperClassName"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React, { useEffect, useId, useRef } from "react";
+import Field from "../Field";
+
+/**
+ * The props for the Select component.
+ */
+
+var generateOptions = options => options === null || options === void 0 ? void 0 : options.map(_ref => {
+  var {
+      label,
+      value
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("option", _extends({
+    value: value,
+    key: "".concat(value) || label
+  }, props), label);
+});
+
+/**
+ * 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.
+ */
+var Select = _ref2 => {
+  var {
+      caution,
+      className,
+      error,
+      help,
+      id,
+      label,
+      labelClassName,
+      onChange: _onChange,
+      options,
+      required,
+      stacked,
+      success,
+      takeFocus,
+      wrapperClassName
+    } = _ref2,
+    selectProps = _objectWithoutProperties(_ref2, _excluded2);
+  var selectRef = useRef(null);
+  var validationId = useId();
+  var defaultSelectId = useId();
+  var selectId = id || defaultSelectId;
+  var helpId = useId();
+  var hasError = !!error;
+  useEffect(() => {
+    if (takeFocus) {
+      selectRef.current.focus();
+    }
+  }, [takeFocus]);
+  return /*#__PURE__*/React.createElement(Field, {
+    caution: caution,
+    className: wrapperClassName,
+    error: error,
+    forId: selectId,
+    help: help,
+    helpId: helpId,
+    isSelect: true,
+    label: label,
+    labelClassName: labelClassName,
+    required: required,
+    stacked: stacked,
+    success: success,
+    validationId: validationId
+  }, /*#__PURE__*/React.createElement("select", _extends({
+    "aria-describedby": [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" "),
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
+    className: classNames("p-form-validation__input", className),
+    id: selectId,
+    onChange: evt => _onChange && _onChange(evt),
+    ref: selectRef
+  }, selectProps), generateOptions(options)));
+};
+export default Select;

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

@@ -0,0 +1,7 @@
+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/esm/components/Select/Select.stories.js

@@ -0,0 +1,90 @@
+import React from "react";
+import Select from "./Select";
+var meta = {
+  component: Select,
+  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
+      }
+    }
+  }
+};
+export default meta;
+export var 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"
+  }
+};
+export var SelectMultiple = {
+  render: () => /*#__PURE__*/React.createElement(Select, {
+    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/esm/components/Select/Select.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/esm/components/Select/index.js

@@ -0,0 +1 @@
+export { default } from "./Select";

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

@@ -0,0 +1,50 @@
+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;