@canonical/react-components 1.6.0 → 1.7.0

package/dist/esm/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,308 @@
+import _pt from "prop-types";
+var _excluded = ["items", "selectedItems", "disabledItems", "header", "updateItems", "onSelectItem", "onDeselectItem", "isOpen", "footer", "sortFn", "groupFn"];
+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 React, { useEffect, useId, useMemo, useRef, useState } from "react";
+import "./MultiSelect.scss";
+import { Button, CheckboxInput, ContextualMenu, SearchBox } from "../../index";
+import { FadeInDown } from "./FadeInDown";
+var sortAlphabetically = (a, b) => {
+  return a.label.localeCompare(b.label, "en", {
+    numeric: true
+  });
+};
+var createSortSelectedItems = previouslySelectedItemValues => (a, b) => {
+  if (previouslySelectedItemValues) {
+    var aIsPreviouslySelected = previouslySelectedItemValues.has(a.value);
+    var bIsPreviouslySelected = previouslySelectedItemValues.has(b.value);
+    if (aIsPreviouslySelected && !bIsPreviouslySelected) return -1;
+    if (!aIsPreviouslySelected && bIsPreviouslySelected) return 1;
+  }
+  return 0;
+};
+var getGroupedItems = items => {
+  var groups = new Map();
+  items.forEach(item => {
+    var group = item.group || "Ungrouped";
+    var groupItems = groups.get(group) || [];
+    groupItems.push(item);
+    groups.set(group, groupItems);
+  });
+  return Array.from(groups, _ref => {
+    var [group, items] = _ref;
+    return {
+      group,
+      items
+    };
+  });
+};
+export var MultiSelectDropdown = _ref2 => {
+  var {
+      items,
+      selectedItems,
+      disabledItems,
+      header,
+      updateItems,
+      onSelectItem,
+      onDeselectItem,
+      isOpen,
+      footer,
+      sortFn = sortAlphabetically,
+      groupFn = getGroupedItems
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var selectedItemValues = useMemo(() => new Set(selectedItems.map(item => item.value)), [selectedItems]);
+  var disabledItemValues = useMemo(() => new Set(disabledItems.map(item => item.value)), [disabledItems]);
+  var [previouslySelectedItemValues, setPreviouslySelectedItemValues] = useState(new Set(selectedItemValues));
+  useEffect(() => {
+    if (isOpen) {
+      setPreviouslySelectedItemValues(new Set(selectedItemValues));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+  var hasGroup = useMemo(() => items.some(item => item.group), [items]);
+  var groupedItems = useMemo(() => hasGroup ? groupFn(items) : [{
+    group: "Ungrouped",
+    items
+  }],
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [items, groupFn]);
+  var handleOnChange = event => {
+    var {
+      checked,
+      value
+    } = event.target;
+    var foundItem = items.find(item => "".concat(item.value) === value);
+    if (foundItem) {
+      var _selectedItems$filter;
+      var newSelectedItems = checked ? [...selectedItems, foundItem] : (_selectedItems$filter = selectedItems.filter(item => "".concat(item.value) !== value)) !== null && _selectedItems$filter !== void 0 ? _selectedItems$filter : [];
+      updateItems(newSelectedItems);
+      if (checked) {
+        onSelectItem === null || onSelectItem === void 0 || onSelectItem(foundItem);
+      } else {
+        onDeselectItem === null || onDeselectItem === void 0 || onDeselectItem(foundItem);
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(FadeInDown, {
+    isVisible: isOpen
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    className: "multi-select__dropdown",
+    role: "listbox"
+  }, props), header ? header : null, groupedItems.map(_ref3 => {
+    var {
+      group,
+      items
+    } = _ref3;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "multi-select__group",
+      key: group
+    }, hasGroup ? /*#__PURE__*/React.createElement("h5", {
+      className: "multi-select__dropdown-header"
+    }, group) : null, /*#__PURE__*/React.createElement("ul", {
+      className: "multi-select__dropdown-list",
+      "aria-label": group
+    }, items.sort(sortFn).sort(createSortSelectedItems(previouslySelectedItemValues)).map(item => /*#__PURE__*/React.createElement("li", {
+      key: item.value,
+      className: "multi-select__dropdown-item"
+    }, /*#__PURE__*/React.createElement(CheckboxInput, {
+      disabled: disabledItemValues.has(item.value),
+      label: item.label,
+      checked: selectedItemValues.has(item.value),
+      value: item.value,
+      onChange: handleOnChange,
+      key: item.value
+    })))));
+  }), footer ? /*#__PURE__*/React.createElement("div", {
+    className: "multi-select__footer"
+  }, footer) : null));
+};
+
+/**
+ * Component allowing to select multiple items from a list of options.
+ *
+ * `MultiSelectDropdown` displays the dropdown with options which are grouped and sorted alphabetically.
+ * `SearchBox` or `Button` is used to trigger the dropdown depending on the variant.
+ */
+MultiSelectDropdown.propTypes = {
+  isOpen: _pt.bool.isRequired,
+  items: _pt.arrayOf(_pt.shape({
+    label: _pt.string.isRequired,
+    value: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
+    group: _pt.string
+  })).isRequired,
+  selectedItems: _pt.arrayOf(_pt.shape({
+    label: _pt.string.isRequired,
+    value: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
+    group: _pt.string
+  })).isRequired,
+  disabledItems: _pt.arrayOf(_pt.shape({
+    label: _pt.string.isRequired,
+    value: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
+    group: _pt.string
+  })).isRequired,
+  header: _pt.node,
+  updateItems: _pt.func.isRequired,
+  onDeselectItem: _pt.func,
+  onSelectItem: _pt.func,
+  footer: _pt.node,
+  groupFn: _pt.func,
+  sortFn: _pt.any
+};
+export var MultiSelect = _ref4 => {
+  var {
+    disabled,
+    selectedItems: externalSelectedItems = [],
+    label,
+    listSelected = true,
+    onItemsUpdate,
+    onSelectItem,
+    onDeselectItem,
+    placeholder,
+    required = false,
+    items = [],
+    disabledItems = [],
+    dropdownHeader,
+    dropdownFooter,
+    showDropdownFooter = true,
+    variant = "search"
+  } = _ref4;
+  var buttonRef = useRef();
+  var [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  var [filter, setFilter] = useState("");
+  var [internalSelectedItems, setInternalSelectedItems] = useState([]);
+  var selectedItems = externalSelectedItems || internalSelectedItems;
+  var updateItems = newItems => {
+    var uniqueItems = Array.from(new Set(newItems));
+    setInternalSelectedItems(uniqueItems);
+    onItemsUpdate && onItemsUpdate(uniqueItems);
+  };
+  var dropdownId = useId();
+  var inputId = useId();
+  var selectedItemsLabel = selectedItems.filter(selectedItem => items.some(item => item.value === selectedItem.value)).map(el => el.label).join(", ");
+  var footer = null;
+  if (showDropdownFooter) {
+    footer = dropdownFooter ? dropdownFooter : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      appearance: "link",
+      onClick: () => {
+        var enabledItems = items.filter(item => !disabledItems.some(disabledItem => disabledItem.value === item.value));
+        updateItems([...selectedItems, ...enabledItems]);
+      },
+      type: "button"
+    }, "Select all"), /*#__PURE__*/React.createElement(Button, {
+      appearance: "link",
+      onClick: () => {
+        var disabledSelectedItems = selectedItems.filter(item => disabledItems.some(disabledItem => disabledItem.value === item.value));
+        updateItems(disabledSelectedItems);
+      },
+      type: "button"
+    }, "Clear"));
+  }
+  return /*#__PURE__*/React.createElement(ContextualMenu, {
+    className: "multi-select",
+    onToggleMenu: isOpen => {
+      if (!isOpen) {
+        setFilter("");
+      }
+      // Handle syncing the state when toggling the menu from within the
+      // contextual menu component e.g. when clicking outside.
+      if (isOpen !== isDropdownOpen) {
+        setIsDropdownOpen(isOpen);
+      }
+    },
+    position: "left",
+    constrainPanelWidth: true,
+    toggle: variant === "search" ? /*#__PURE__*/React.createElement(SearchBox, {
+      externallyControlled: true,
+      "aria-controls": dropdownId,
+      "aria-expanded": isDropdownOpen,
+      id: inputId,
+      role: "combobox",
+      "aria-label": label || placeholder || "Search",
+      disabled: disabled,
+      autoComplete: "off",
+      onChange: value => {
+        setFilter(value);
+        // reopen if dropdown has been closed via ESC
+        setIsDropdownOpen(true);
+      },
+      onFocus: () => setIsDropdownOpen(true),
+      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Search",
+      required: required,
+      type: "text",
+      value: filter,
+      className: "multi-select__input"
+    }) : /*#__PURE__*/React.createElement("button", {
+      role: "combobox",
+      type: "button",
+      "aria-label": label || placeholder || "Select items",
+      "aria-controls": dropdownId,
+      "aria-expanded": isDropdownOpen,
+      className: "multi-select__select-button",
+      onClick: () => {
+        setIsDropdownOpen(!isDropdownOpen);
+      },
+      onMouseDown: event => {
+        // If the dropdown is open when this button is clicked the
+        // click-outside event will fire which will close the dropdown, but
+        // then the button click event will fire which will immediately
+        // reopen the dropdown.
+        // To prevent this we can stop the propagation to the click event
+        // while `isDropdownOpen` is still set to `true` (by the time we
+        // get to the `onClick` event `isDropdownOpen` will already be `false`,
+        // hence having to do this on mouse down).
+        if (isDropdownOpen) {
+          event.stopPropagation();
+        }
+      },
+      ref: buttonRef
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "multi-select__condensed-text"
+    }, listSelected && selectedItems.length > 0 ? selectedItemsLabel : placeholder !== null && placeholder !== void 0 ? placeholder : "Select items")),
+    visible: isDropdownOpen
+  }, /*#__PURE__*/React.createElement(MultiSelectDropdown, {
+    id: dropdownId,
+    isOpen: isDropdownOpen,
+    items: filter.length > 0 ? items.filter(item => item.label.toLowerCase().includes(filter.toLowerCase())) : items,
+    selectedItems: selectedItems,
+    disabledItems: disabledItems,
+    header: dropdownHeader,
+    updateItems: updateItems,
+    onSelectItem: onSelectItem,
+    onDeselectItem: onDeselectItem,
+    footer: footer
+  }));
+};
+MultiSelect.propTypes = {
+  disabled: _pt.bool,
+  error: _pt.string,
+  selectedItems: _pt.arrayOf(_pt.shape({
+    label: _pt.string.isRequired,
+    value: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
+    group: _pt.string
+  })),
+  help: _pt.string,
+  label: _pt.oneOfType([_pt.string, _pt.oneOf([null])]),
+  listSelected: _pt.bool,
+  onDeselectItem: _pt.func,
+  onItemsUpdate: _pt.func,
+  onSelectItem: _pt.func,
+  placeholder: _pt.string,
+  required: _pt.bool,
+  items: _pt.arrayOf(_pt.shape({
+    label: _pt.string.isRequired,
+    value: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
+    group: _pt.string
+  })).isRequired,
+  disabledItems: _pt.arrayOf(_pt.shape({
+    label: _pt.string.isRequired,
+    value: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
+    group: _pt.string
+  })),
+  renderItem: _pt.func,
+  dropdownHeader: _pt.node,
+  dropdownFooter: _pt.node,
+  showDropdownFooter: _pt.bool,
+  variant: _pt.oneOf(["condensed", "search"])
+};

package/dist/esm/components/MultiSelect/MultiSelect.scss

@@ -0,0 +1,151 @@
+@use "sass:map";
+@import "vanilla-framework";
+@include vf-b-placeholders; // Vanilla base placeholders to extend from
+
+$dropdown-max-height: 20rem;
+
+.multi-select {
+  // Scope Vanilla form includes to multi select component only
+  // to avoid overriding any Vanilla base styles
+  // XXX: This is a workaround for https://github.com/canonical/vanilla-framework/issues/5030
+  @include vf-b-forms;
+
+  margin-bottom: $input-margin-bottom;
+  position: relative;
+  width: 100%;
+}
+
+.multi-select .p-form-validation__message {
+  margin-top: 0;
+}
+
+.multi-select__condensed-text {
+  margin-right: $sph--large + $sph--x-small;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.multi-select__input {
+  cursor: pointer;
+  margin-bottom: 0;
+  position: relative;
+
+  &.items-selected {
+    border-top: 0;
+    box-shadow: none;
+    top: -#{$border-radius};
+  }
+
+  &[disabled],
+  &[disabled="disabled"] {
+    opacity: 1;
+  }
+}
+
+.multi-select__dropdown--side-by-side {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.multi-select__group {
+  flex: 1 0 auto;
+}
+
+.multi-select__dropdown-list {
+  list-style: none;
+  margin-bottom: $sph--x-small;
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.multi-select__footer {
+  background: $colors--theme--background-default;
+  border-top: 1px solid $colors--theme--border-default;
+  bottom: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: $sph--small $sph--large 0 $sph--large;
+  position: sticky;
+}
+
+.multi-select__dropdown-header {
+  font-size: #{map.get($font-sizes, small)}rem;
+  letter-spacing: #{map.get($font-sizes, small)}px;
+  margin-bottom: 0;
+  padding: $spv--x-small $sph--large;
+  position: relative;
+  text-transform: uppercase;
+}
+
+.multi-select__dropdown-item {
+  padding: 0 $sph--large;
+
+  .p-checkbox {
+    padding-top: $sph--x-small;
+  }
+
+  &,
+  .p-checkbox {
+    width: 100%;
+  }
+}
+
+.multi-select__dropdown-button {
+  border: 0;
+  margin-bottom: 0;
+  padding-left: $sph--small;
+  padding-right: $sph--small;
+  text-align: left;
+  width: 100%;
+}
+
+.multi-select__selected-list {
+  background-color: $colors--theme--background-inputs;
+  border-bottom: 0;
+  margin: 0;
+  overflow: hidden;
+  padding: $spv--x-small $sph--small;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.multi-select__select-button {
+  @extend %vf-input-elements;
+  align-items: center;
+  display: inline-flex;
+  height: 2.5rem;
+  justify-content: space-between;
+  overflow: auto;
+
+  position: relative;
+  z-index: 0;
+
+  .multi-select & {
+    margin-bottom: 0;
+  }
+
+  &::after {
+    content: "";
+    margin-left: $sph--large;
+    position: absolute;
+    right: $sph--small;
+    top: 50%;
+    transform: translateY(-50%) rotate(-180deg);
+
+    @extend %icon;
+    @include vf-icon-chevron-themed;
+    @include vf-transition($property: transform, $duration: fast);
+  }
+
+  &[aria-expanded="true"] {
+    background-color: $colors--theme--background-hover;
+  }
+
+  &[aria-expanded="false"] {
+    &::after {
+      transform: translateY(-50%) rotate(0);
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { MultiSelect } from "./MultiSelect";
+declare const meta: Meta<typeof MultiSelect>;
+export default meta;
+type Story = StoryObj<typeof MultiSelect>;
+export declare const CondensedExample: Story;
+export declare const SearchExample: Story;
+export declare const WithDisabledItems: Story;

package/dist/esm/components/MultiSelect/MultiSelect.stories.js

@@ -0,0 +1,65 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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); }
+import React from "react";
+import { useState } from "react";
+import { MultiSelect } from "./MultiSelect";
+var Template = props => {
+  var [selectedItems, setSelectedItems] = useState(props.selectedItems || []);
+  return /*#__PURE__*/React.createElement(MultiSelect, _extends({}, props, {
+    selectedItems: selectedItems,
+    onItemsUpdate: setSelectedItems
+  }));
+};
+var meta = {
+  component: MultiSelect,
+  render: Template,
+  tags: ["autodocs"],
+  parameters: {}
+};
+export default meta;
+export var CondensedExample = {
+  args: {
+    items: [...Array.from({
+      length: 26
+    }, (_, i) => ({
+      label: "".concat(String.fromCharCode(i + 65)),
+      value: "".concat(String.fromCharCode(i + 65))
+    })), ...Array.from({
+      length: 26
+    }, (_, i) => ({
+      label: "Item ".concat(i + 1),
+      value: i + 1
+    }))],
+    selectedItems: [{
+      label: "A",
+      value: "A"
+    }, {
+      label: "Item 2",
+      value: 2
+    }],
+    variant: "condensed"
+  }
+};
+export var SearchExample = {
+  args: _objectSpread(_objectSpread({}, CondensedExample.args), {}, {
+    variant: "search",
+    items: [...CondensedExample.args.items.map((item, i) => _objectSpread(_objectSpread({}, item), {}, {
+      group: i % 2 === 0 ? "Group 1" : "Group 2"
+    }))]
+  })
+};
+export var WithDisabledItems = {
+  args: _objectSpread(_objectSpread({}, CondensedExample.args), {}, {
+    disabledItems: [{
+      label: "Item 1",
+      value: 1
+    }, {
+      label: "Item 2",
+      value: 2
+    }]
+  })
+};

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

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

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

@@ -0,0 +1 @@
+export * from "./MultiSelect";

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

@@ -0,0 +1 @@
+export * from "./MultiSelect";

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

@@ -0,0 +1,66 @@
+import { ReactNode, HTMLProps } from "react";
+import type { GenerateLink, NavItem, LogoProps } from "./types";
+import { PropsWithSpread, SubComponentProps } from "../../types";
+import { SearchBoxProps } from "../SearchBox";
+import { Theme } from "../../enums";
+export type Props = PropsWithSpread<{
+    /**
+     * By default the header is constrained to the width of the grid. Use this
+     * option to make the header take the full width of the page.
+     */
+    fullWidth?: boolean;
+    /**
+     * This function can be used to generate link elements when you don't want to
+     * use a standard HTML anchor.
+     */
+    generateLink?: GenerateLink | null;
+    /**
+     * The main navigation items that appear on the left hand side next to the logo.
+     */
+    items?: NavItem[] | null;
+    /**
+     * Additional navigation items that appear on the right hand side of the
+     * navigation banner.
+     */
+    itemsRight?: NavItem[] | null;
+    /**
+     * Additional props to be applied to the nav element that wraps the main
+     * navigation items on the left hand side.
+     */
+    leftNavProps?: HTMLProps<HTMLUListElement> | null;
+    /**
+     * The logo can be defined either by providing props for the standard logo
+     * or the full logo markup when a custom logo is needed.
+     */
+    logo: LogoProps | ReactNode;
+    /**
+     * Additional props to be applied to the nav element that wraps the
+     * left and right nav items.
+     */
+    navProps?: HTMLProps<HTMLElement> | null;
+    /**
+     * Additional props to be applied to the nav element that wraps the
+     * navigation items on the right hand side.
+     */
+    rightNavProps?: HTMLProps<HTMLUListElement> | null;
+    /**
+     * Props to pass to the SearchBox component. When these props are provided the
+     * search box will appear.
+     */
+    searchProps?: SubComponentProps<SearchBoxProps> | null;
+    /**
+     * The header theme. When this is not provided the header will use the default
+     * theme defined in the Vanilla settings.
+     */
+    theme?: Theme | null;
+}, HTMLProps<HTMLElement>>;
+/**
+This is the [React](https://reactjs.org/) component for the Vanilla
+[Navigation](https://vanillaframework.io/docs/patterns/navigation) pattern. It
+is a simple navigation bar that you can add to the top of your site or app.
+
+The navigation items are collapsed behind a "Menu" link in small screens and
+displayed horizontally on larger screens.
+ */
+declare const Navigation: ({ fullWidth, generateLink, items, itemsRight, leftNavProps, logo, navProps, rightNavProps, searchProps, theme, ...headerProps }: Props) => JSX.Element;
+export default Navigation;