diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 00000000..634a6b65 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,14 @@ +name: CI +on: [push, pull_request] +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - name: Install dependencies and build the library + run: | + yarn + yarn build:api + yarn build:lib + - name: Run unit tests and validate TypeScript definitions + run: yarn test diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index bad68449..00000000 --- a/.travis.yml +++ /dev/null @@ -1,6 +0,0 @@ -language: node_js -node_js: 12 -cache: yarn -script: - - yarn prepack - - yarn test diff --git a/CHANGELOG.md b/CHANGELOG.md index b63628ac..5ef69729 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,388 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 -## [0.32.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.32.2) - 2021-04-23 +## [0.44.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.5) - 2021-10-04 + +**Fixes** + +- correctly apply `menuOptionsClass` in `OverflowMenu` + +## [0.44.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.4) - 2021-09-28 + +**Fixes** + +- `ClickableTile` TypeScript definition restProps should extend attributes of either `a` or `p` tags + +## [0.44.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.3) - 2021-09-23 + +**Fixes** + +- correctly apply styles when using a static width `DataTable` with a title and description + +## [0.44.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.2) - 2021-09-14 + +**Fixes** + +- prevent redundant `clear` events in `ComboBox` + +## [0.44.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.1) - 2021-09-11 + +**Fixes** + +- if `ComboBox` is disabled, clicking the chevron icon should not toggle the dropdown +- `ToolbarBatchActions` cancel button text should be slottable + +## [0.44.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.0) - 2021-09-07 + +**Features** + +- add ability to override or customize `DatePicker` calendar options using the `flatpickrProps` prop + +## [0.43.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.43.0) - 2021-09-06 + +**Features** + +- add ability to programmatically clear a `ComboBox` using the `clear` component accessor + +## [0.42.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.42.3) - 2021-09-05 + +**Fixes** + +- `RadioButton` "labelText" slot should render even if `labelText` is falsy +- only render `FormGroup` `legend` element if `legendText` is truthy + +## [0.42.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.42.2) - 2021-07-29 + +**Fixes** + +- fix reactivity regression in `ComboBox` + +**Documentation** + +- update example set-ups +- document styling instructions, `carbon-preprocess-svelte` in README.md + +## [0.42.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.42.1) - 2021-07-26 + +**Fixes** + +- disable `a11y-mouse-events-have-key-events` warnings +- upgrade `carbon-icons-svelte` to v10.36.0 to quell `a11y-mouse...` warnings + +**Refactor** + +- remove `formatStyle` utility in `OverflowMenu` + +**Documentation** + +- add `svelte:head` example usage for loading CDN styles +- add instructions for dynamic theming +- update number of available Carbon icons + +## [0.42.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.42.0) - 2021-07-22 + +**Features** + +- add `helperText` prop to `DatePickerInput` + +**Fixes** + +- replace `svelte:body` with `svelte:window` when listening for an outside click + +**Documentation** + +- fix typos in styling instructions +- update expanded nodes guidance +- add `DatePicker` example "With helper text" + +**Refactor** + +- omit explicit `treeview.scss` import in `css/*.scss` files as it is included by default in `carbon-components@10.40` + +**Housekeeping** + +- upgrade `carbon-components` to v10.40.0 + +## [0.41.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.41.0) - 2021-07-18 + +**Features** + +- add expandedIds to `TreeView` + +**Fixes** + +- do not fall back to an empty string for a `DataTable` value if falsy +- omit disabled attribute in `Button` if value is falsy + +**Documentation** + +- add styling instructions to the home page + +## [0.40.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.40.1) - 2021-07-14 + +**Fixes** + +- focus first, non-disabled `TreeView` node if active id does not match the selected id +- set `type="button"` on `OverflowMenu` to prevent submit behavior when pressing "Enter" +- update semantic attributes in `OverflowMenuItem` +- do not render `OverflowMenuItem` title attribute if using a slot +- do not dispatch `NumberInput` on:change event on initialization +- dynamically load ESM `flatpickr` rangePlugin +- forward input, focus events to `Select` +- type `DataTableRowId` as `any`, fixes + +## [0.40.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.40.0) - 2021-07-11 + +**Breaking Changes** + +- remove `appendTo` prop in `DatePicker` for server-side rendering (SSR) compatibility + +**Features** + +- add `Breakpoint` component to detect the current Carbon grid size based on browser width +- add `Theme` component to dynamically update the current theme client-side +- add `valueFrom`, `valueTo` props for range `DatePicker` +- export `multiSelectRef`, `fieldRef`, `selectionRef` in `MultiSelect` +- add clearItem, clearAll instance methods to `LocalStorage` +- support `NumberInput` readonly variant + +**Fixes** + +- append `DatePicker` instance to local reference to prevent arrow key locking +- fix `on:change` type signature in `DatePicker` +- export id prop in `ProgressBar` +- add skeleton text for every row and column in `DataTableSkeleton` +- deprecate `shouldShowBorder` prop in `Table` +- correctly type exported constant props and function declarations as accessors in `SvelteComponentTyped` interface + +**Documentation** + +- document Breakpoint component +- document Theme component +- add ProgressBar "UX example" +- add DatePicker example "Range" +- add NumberInput example "Read-only variant" + +**Housekeeping** + +- upgrade `carbon-components` to v10.39.0 + +## [0.39.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.39.0) - 2021-07-05 + +**Breaking Changes** + +- remove `clipboard-copy` direct dependency; use native Clipboard API instead of `clipboard-copy` to copy text in `CopyButton`, `CodeSnippet` + +**Features** + +- add `TreeView` component +- add `RecursiveList` component +- support 3 buttons in `Modal`, `ComposedModal` via `secondaryButtons` +- make `DataTable` title/description slottable +- allow custom `expansionBreakpoint` in UI Shell `Header`, `SideNav` +- dispatch "click:button--primary" as an alias to "submit" in `Modal`, `ComposedModal` + +**Fixes** + +- export `useStaticWidth` prop in `DataTable` +- do not render `DataTable` table header if title/description not provided + +**Documentation** + +- add TreeView documentation +- add RecursiveList documentation +- add CopyButton examples "Overriding copy functionality", "Preventing copy functionality" +- add CodeSnippet examples "Overriding copy functionality", "Preventing copy functionality" +- add DataTable example "Static width" +- include typedefs in Component API section + +## [0.38.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.38.2) - 2021-07-03 + +**Fixes** + +- prevent ` diff --git a/src/TextArea/TextAreaSkeleton.svelte b/src/TextArea/TextAreaSkeleton.svelte index 036fa7d4..e2a926aa 100644 --- a/src/TextArea/TextAreaSkeleton.svelte +++ b/src/TextArea/TextAreaSkeleton.svelte @@ -3,6 +3,7 @@ export let hideLabel = false; +
+
- {#if labelText} + {#if inline} + {#if !isFluid && helperText} +
+ {helperText} +
+ {/if} + {:else} + {/if}
- {#if invalid} - - {/if} - - -
- {#if !invalid && helperText}
- {helperText} + {#if invalid} + + {/if} + {#if !invalid && warn} + + {/if} + +
- {/if} - {#if invalid} -
{invalidText}
- {/if} + {#if !isFluid && invalid} +
+ {invalidText} +
+ {/if} + {#if !invalid && !warn && !isFluid && !inline} +
+ {helperText} +
+ {/if} + {#if !isFluid && !invalid && warn} +
{warnText}
+ {/if} +
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte index 0a4b0114..ff63464e 100644 --- a/src/TextInput/TextInput.svelte +++ b/src/TextInput/TextInput.svelte @@ -59,12 +59,16 @@ /** Set to `true` to mark the field as required */ export let required = false; - /** Set to `true` to use inline version */ + /** Set to `true` to use the inline variant */ export let inline = false; + /** Set to `true` to use the read-only variant */ + export let readonly = false; + import { getContext } from "svelte"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte"; import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte"; + import EditOff16 from "carbon-icons-svelte/lib/EditOff16/EditOff16.svelte"; const ctx = getContext("Form"); @@ -73,17 +77,20 @@ $: warnId = `warn-${id}`; +
{#if inline} -
+
{#if labelText} {/if} {#if !isFluid && helperText} @@ -116,7 +125,9 @@ class:bx--label--inline="{inline}" class="{inline && !!size && `bx--label--inline--${size}`}" > - {labelText} + + {labelText} + {/if}
{/if} + {#if readonly} + + {/if} diff --git a/src/TextInput/TextInputSkeleton.svelte b/src/TextInput/TextInputSkeleton.svelte index 4a54ca07..76588c07 100644 --- a/src/TextInput/TextInputSkeleton.svelte +++ b/src/TextInput/TextInputSkeleton.svelte @@ -3,6 +3,7 @@ export let hideLabel = false; +
+ /** + * Dynamic, client-side theming using CSS variables + * Only works with `carbon-components-svelte/css/all.css` + */ + + /** + * @typedef {"white" | "g10" | "g80" | "g90" | "g100"} CarbonTheme + * @event {{ theme: CarbonTheme; }} update + * @slot {{ theme: CarbonTheme; }} + */ + + /** + * Set the current Carbon theme + * @type {CarbonTheme} + */ + export let theme = "white"; + + /** + * Customize a theme with your own tokens + * https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme + * @type {{ [token: string]: any; }} + */ + export let tokens = {}; + + /** Set to `true` to persist the theme using window.localStorage */ + export let persist = false; + + /** Specify the local storage key */ + export let persistKey = "theme"; + + /** + * Render a toggle or select dropdown to control the theme + * @type {"toggle" | "select"} + */ + export let render = undefined; + + /** + * Override the default toggle props + * @type {import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }} + */ + export let toggle = { + themes: ["white", "g100"], + labelA: "", + labelB: "", + labelText: "Dark mode", + hideLabel: false, + }; + + /** @type {Record} */ + const themes = { + white: "White", + g10: "Gray 10", + g80: "Gray 80", + g90: "Gray 90", + g100: "Gray 100", + }; + + /** @type {CarbonTheme} */ + const themeKeys = Object.keys(themes); + + /** + * Override the default select props + * @type {import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; }} + */ + export let select = { + themes: themeKeys, + labelText: "Themes", + hideLabel: false, + }; + + import { createEventDispatcher } from "svelte"; + import Toggle from "../Toggle/Toggle.svelte"; + import Select from "../Select/Select.svelte"; + import SelectItem from "../Select/SelectItem.svelte"; + import LocalStorage from "../LocalStorage/LocalStorage.svelte"; + + const dispatch = createEventDispatcher(); + + $: if (typeof window !== "undefined") { + Object.entries(tokens).forEach(([token, value]) => { + document.documentElement.style.setProperty(`--cds-${token}`, value); + }); + + if (theme in themes) { + document.documentElement.setAttribute("theme", theme); + dispatch("update", { theme }); + } else { + console.warn( + `[Theme.svelte] invalid theme "${theme}". Value must be one of: ${JSON.stringify( + Object.keys(themes) + )}` + ); + } + } + + +{#if persist} + +{/if} + +{#if render === "toggle"} + +{:else if render === "select"} + +{/if} + + diff --git a/src/Theme/index.js b/src/Theme/index.js new file mode 100644 index 00000000..79f7e13d --- /dev/null +++ b/src/Theme/index.js @@ -0,0 +1 @@ +export { default as Theme } from "./Theme.svelte"; diff --git a/src/Tile/ClickableTile.svelte b/src/Tile/ClickableTile.svelte index 980216c4..3121a317 100644 --- a/src/Tile/ClickableTile.svelte +++ b/src/Tile/ClickableTile.svelte @@ -1,25 +1,29 @@ - - +
+
- {labelText} + + {labelText} + {/if} diff --git a/src/TimePicker/TimePickerSelect.svelte b/src/TimePicker/TimePickerSelect.svelte index 2eb46a25..44164163 100644 --- a/src/TimePicker/TimePickerSelect.svelte +++ b/src/TimePicker/TimePickerSelect.svelte @@ -44,6 +44,7 @@ $: value = $selectedValue; +
- {labelText} + + {labelText} + {/if} diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte index e3e8dbe7..02c6e4f2 100644 --- a/src/Toggle/Toggle.svelte +++ b/src/Toggle/Toggle.svelte @@ -40,6 +40,7 @@ $: dispatch("toggle", { toggled }); +
- {labelText} + + {labelText} +
{#if labelText} - {labelText} + + + {labelText} + + {/if} diff --git a/src/ToggleSmall/ToggleSmall.svelte b/src/ToggleSmall/ToggleSmall.svelte index 657f8f5d..7fcb64c5 100644 --- a/src/ToggleSmall/ToggleSmall.svelte +++ b/src/ToggleSmall/ToggleSmall.svelte @@ -30,6 +30,7 @@ export let name = undefined; +
+
- + }}" +/> diff --git a/src/TooltipDefinition/TooltipDefinition.svelte b/src/TooltipDefinition/TooltipDefinition.svelte index 407261b8..ae79ed35 100644 --- a/src/TooltipDefinition/TooltipDefinition.svelte +++ b/src/TooltipDefinition/TooltipDefinition.svelte @@ -31,12 +31,13 @@ } - + }}" +/> - -
+ diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte index 5bffcebb..62a41245 100644 --- a/src/TooltipIcon/TooltipIcon.svelte +++ b/src/TooltipIcon/TooltipIcon.svelte @@ -5,6 +5,15 @@ */ export let tooltipText = ""; + /** + * Specify the icon from `carbon-icons-svelte` to render + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let icon = undefined; + + /** Set to `true` to disable the tooltip icon */ + export let disabled = false; + /** * Set the alignment of the tooltip relative to the icon * @type {"start" | "center" | "end"} @@ -26,19 +35,21 @@ let hidden = false; - + }}" +/> diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte new file mode 100644 index 00000000..699a4898 --- /dev/null +++ b/src/TreeView/TreeView.svelte @@ -0,0 +1,144 @@ + + +{#if !hideLabel} + + +{/if} + +
    + +
diff --git a/src/TreeView/TreeViewNode.svelte b/src/TreeView/TreeViewNode.svelte new file mode 100644 index 00000000..038d2e52 --- /dev/null +++ b/src/TreeView/TreeViewNode.svelte @@ -0,0 +1,125 @@ + + + + +
  • +
    + + {text} +
    +
    • diff --git a/src/TreeView/TreeViewNodeList.svelte b/src/TreeView/TreeViewNodeList.svelte new file mode 100644 index 00000000..a1b4f407 --- /dev/null +++ b/src/TreeView/TreeViewNodeList.svelte @@ -0,0 +1,167 @@ + + +{#if root} + {#each children as child (child.id)} + {#if Array.isArray(child.children)} + + {:else} + + {/if} + {/each} +{:else} +
  • +
    + + + + + + {text} + +
    + {#if expanded} +
      + {#each children as child (child.id)} + {#if Array.isArray(child.children)} + + {:else} + + {/if} + {/each} +
    + {/if} +
    • +{/if} diff --git a/src/TreeView/index.js b/src/TreeView/index.js new file mode 100644 index 00000000..59f96be0 --- /dev/null +++ b/src/TreeView/index.js @@ -0,0 +1 @@ +export { default as TreeView } from "./TreeView.svelte"; diff --git a/src/UIShell/GlobalHeader/Header.svelte b/src/UIShell/GlobalHeader/Header.svelte index c106e746..2241bb71 100644 --- a/src/UIShell/GlobalHeader/Header.svelte +++ b/src/UIShell/GlobalHeader/Header.svelte @@ -32,16 +32,45 @@ /** Set to `true` to persist the hamburger menu */ export let persistentHamburgerMenu = false; + /** + * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden + * 1056 represents the "large" breakpoint in pixels from the Carbon Design System: + * small: 320 + * medium: 672 + * large: 1056 + * x-large: 1312 + * max: 1584 + */ + export let expansionBreakpoint = 1056; + /** Obtain a reference to the HTML anchor element */ export let ref = null; + /** + * Specify the icon from `carbon-icons-svelte` to render for the closed state + * Defaults to `Menu20` + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let iconMenu = Menu20; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the opened state + * Defaults to `Close20` + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let iconClose = Close20; + + import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte"; + import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte"; import { shouldRenderHamburgerMenu } from "../navStore"; import HamburgerMenu from "../SideNav/HamburgerMenu.svelte"; let winWidth = undefined; $: isSideNavOpen = - expandedByDefault && winWidth >= 1056 && !persistentHamburgerMenu; + expandedByDefault && + winWidth >= expansionBreakpoint && + !persistentHamburgerMenu; $: ariaLabel = company ? `${company} ` : "" + (uiShellAriaLabel || $$props["aria-label"] || platformName); @@ -51,8 +80,12 @@
    - {#if ($shouldRenderHamburgerMenu && winWidth < 1056) || persistentHamburgerMenu} - + {#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu} + {/if} - + - +
    diff --git a/src/UIShell/GlobalHeader/HeaderNavItem.svelte b/src/UIShell/GlobalHeader/HeaderNavItem.svelte index 3d8c752e..fb48da11 100644 --- a/src/UIShell/GlobalHeader/HeaderNavItem.svelte +++ b/src/UIShell/GlobalHeader/HeaderNavItem.svelte @@ -11,6 +11,9 @@ */ export let text = undefined; + /** Set to `true` to select the item */ + export let isSelected = false; + /** Obtain a reference to the HTML anchor element */ export let ref = null; @@ -23,6 +26,7 @@ href="{href}" rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}" class:bx--header__menu-item="{true}" + aria-current="{isSelected ? 'page' : undefined}" {...$$restProps} on:click on:mouseover diff --git a/src/UIShell/SideNav/HamburgerMenu.svelte b/src/UIShell/SideNav/HamburgerMenu.svelte index 7cbad33e..4437a35a 100644 --- a/src/UIShell/SideNav/HamburgerMenu.svelte +++ b/src/UIShell/SideNav/HamburgerMenu.svelte @@ -8,18 +8,31 @@ /** Set to `true` to toggle the open state */ export let isOpen = false; + /** + * Specify the icon from `carbon-icons-svelte` to render for the closed state + * Defaults to `Menu20` + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let iconMenu = Menu20; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the opened state + * Defaults to `Close20` + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let iconClose = Close20; + /** Obtain a reference to the HTML button element */ export let ref = null; import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte"; import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte"; - import { Icon } from "../../Icon"; diff --git a/src/UIShell/SideNav/SideNav.svelte b/src/UIShell/SideNav/SideNav.svelte index 728ffdb2..ae08e832 100644 --- a/src/UIShell/SideNav/SideNav.svelte +++ b/src/UIShell/SideNav/SideNav.svelte @@ -1,7 +1,16 @@ + + {#if !fixed}
    diff --git a/src/UIShell/SideNav/SideNavLink.svelte b/src/UIShell/SideNav/SideNavLink.svelte index eca2e042..33244600 100644 --- a/src/UIShell/SideNav/SideNavLink.svelte +++ b/src/UIShell/SideNav/SideNavLink.svelte @@ -22,8 +22,6 @@ /** Obtain a reference to the HTML anchor element */ export let ref = null; - - import Icon from "../../Icon/Icon.svelte";
  • @@ -42,7 +40,7 @@ class:bx--side-nav__icon="{true}" class:bx--side-nav__icon--small="{true}" > - +
    • {/if} {text} diff --git a/src/UIShell/SideNav/SideNavMenu.svelte b/src/UIShell/SideNav/SideNavMenu.svelte index c68bb5df..0625f3ac 100644 --- a/src/UIShell/SideNav/SideNavMenu.svelte +++ b/src/UIShell/SideNav/SideNavMenu.svelte @@ -18,7 +18,6 @@ export let ref = null; import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte"; - import Icon from "../../Icon/Icon.svelte";
  • @@ -35,7 +34,7 @@ > {#if icon}
    - +
    {/if} {text} @@ -44,7 +43,7 @@ class:bx--side-nav__icon--small="{true}" class:bx--side-nav__submenu-chevron="{true}" > - +
      • diff --git a/src/UIShell/SideNav/SideNavMenuItem.svelte b/src/UIShell/SideNav/SideNavMenuItem.svelte index 34181a7c..cfb73636 100644 --- a/src/UIShell/SideNav/SideNavMenuItem.svelte +++ b/src/UIShell/SideNav/SideNavMenuItem.svelte @@ -1,9 +1,6 @@ +
        + import { Breakpoint } from "../types"; + import { BreakpointSize } from "../types/Breakpoint/Breakpoint"; + + let size: BreakpointSize; + + + + {currentSize} + diff --git a/tests/ClickableTile.test.svelte b/tests/ClickableTile.test.svelte index c9c61cc1..b13f31ab 100644 --- a/tests/ClickableTile.test.svelte +++ b/tests/ClickableTile.test.svelte @@ -6,6 +6,11 @@ Carbon Design System - + Carbon Design System diff --git a/tests/CodeSnippet.test.svelte b/tests/CodeSnippet.test.svelte index c7c14389..30904774 100644 --- a/tests/CodeSnippet.test.svelte +++ b/tests/CodeSnippet.test.svelte @@ -35,7 +35,9 @@ export function subtract(a: number, b: number) { hideCloseButton /> -yarn add -D carbon-components-svelte +yarn add -D carbon-components-svelte rm -rf node_modules/ diff --git a/tests/ComboBox.test.svelte b/tests/ComboBox.test.svelte index d38b0344..670ce5c5 100644 --- a/tests/ComboBox.test.svelte +++ b/tests/ComboBox.test.svelte @@ -7,9 +7,14 @@ { id: "1", text: "Email" }, { id: "2", text: "Fax" }, ]; + + let ref: ComboBox; + + $: ref?.clear(); - + - + diff --git a/tests/CopyButton.test.svelte b/tests/CopyButton.test.svelte index 1aa0a2ab..2587f86a 100644 --- a/tests/CopyButton.test.svelte +++ b/tests/CopyButton.test.svelte @@ -1,16 +1,11 @@ - - - - - diff --git a/tests/DataTable.test.svelte b/tests/DataTable.test.svelte index 208d3a5d..e03070d0 100644 --- a/tests/DataTable.test.svelte +++ b/tests/DataTable.test.svelte @@ -98,6 +98,7 @@ description="Your organization's active load balancers." headers="{headers}" rows="{rows}" + useStaticWidth /> - - + + + + + + @@ -51,7 +67,7 @@ /> - + diff --git a/tests/LocalStorage.test.svelte b/tests/LocalStorage.test.svelte index b3268fd8..c220d991 100644 --- a/tests/LocalStorage.test.svelte +++ b/tests/LocalStorage.test.svelte @@ -4,6 +4,9 @@ let storage: LocalStorage; let toggled = false; let events = []; + + $: if (storage) storage.clearItem(); + $: if (storage) storage.clearAll();

        Create a new Cloudant database in the US South region.

        diff --git a/tests/ProgressBar.test.svelte b/tests/ProgressBar.test.svelte new file mode 100644 index 00000000..c3e0c309 --- /dev/null +++ b/tests/ProgressBar.test.svelte @@ -0,0 +1,25 @@ + + + + + + + + + diff --git a/tests/RecursiveList.test.svelte b/tests/RecursiveList.test.svelte new file mode 100644 index 00000000..a0f42611 --- /dev/null +++ b/tests/RecursiveList.test.svelte @@ -0,0 +1,32 @@ + + + diff --git a/tests/Theme.test.svelte b/tests/Theme.test.svelte new file mode 100644 index 00000000..3a3c85ba --- /dev/null +++ b/tests/Theme.test.svelte @@ -0,0 +1,24 @@ + + + diff --git a/tests/TreeView.test.svelte b/tests/TreeView.test.svelte new file mode 100644 index 00000000..67308296 --- /dev/null +++ b/tests/TreeView.test.svelte @@ -0,0 +1,61 @@ + + + diff --git a/types/AspectRatio/AspectRatio.d.ts b/types/AspectRatio/AspectRatio.d.ts index 8e723628..c714dbe3 100644 --- a/types/AspectRatio/AspectRatio.d.ts +++ b/types/AspectRatio/AspectRatio.d.ts @@ -7,7 +7,7 @@ export interface AspectRatioProps * Specify the aspect ratio * @default "2x1" */ - ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"; + ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"; } export default class AspectRatio extends SvelteComponentTyped< diff --git a/types/Breakpoint/Breakpoint.d.ts b/types/Breakpoint/Breakpoint.d.ts new file mode 100644 index 00000000..da725ddc --- /dev/null +++ b/types/Breakpoint/Breakpoint.d.ts @@ -0,0 +1,37 @@ +/// +import { SvelteComponentTyped } from "svelte"; + +export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max"; + +export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; + +export interface BreakpointProps { + /** + * Determine the current Carbon grid breakpoint size + */ + size?: BreakpointSize; + + /** + * Carbon grid sizes as an object + * @default { sm: false, md: false, lg: false, xlg: false, max: false, } + */ + sizes?: Record; +} + +export default class Breakpoint extends SvelteComponentTyped< + BreakpointProps, + { + match: CustomEvent<{ + size: BreakpointSize; + breakpointValue: BreakpointValue; + }>; + }, + { default: { size: BreakpointSize; sizes: Record } } +> { + /** + * Reference the Carbon grid breakpoints + * @constant + * @default { sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, } + */ + breakpoints: Record; +} diff --git a/types/Button/Button.d.ts b/types/Button/Button.d.ts index 97d62ed0..471f240a 100644 --- a/types/Button/Button.d.ts +++ b/types/Button/Button.d.ts @@ -24,7 +24,13 @@ export interface ButtonProps * Specify the size of button * @default "default" */ - size?: "default" | "field" | "small"; + size?: "default" | "field" | "small" | "lg" | "xl"; + + /** + * Set to `true` to use Carbon's expressive typesetting + * @default false + */ + expressive?: boolean; /** * Set to `true` to enable the selected state for an icon-only, ghost button diff --git a/types/Button/ButtonSkeleton.d.ts b/types/Button/ButtonSkeleton.d.ts index ac57f89e..1cc37b25 100644 --- a/types/Button/ButtonSkeleton.d.ts +++ b/types/Button/ButtonSkeleton.d.ts @@ -12,7 +12,7 @@ export interface ButtonSkeletonProps * Specify the size of button skeleton * @default "default" */ - size?: "default" | "field" | "small"; + size?: "default" | "field" | "small" | "lg" | "xl"; /** * @default false diff --git a/types/Checkbox/Checkbox.d.ts b/types/Checkbox/Checkbox.d.ts index cdd7a521..d3746584 100644 --- a/types/Checkbox/Checkbox.d.ts +++ b/types/Checkbox/Checkbox.d.ts @@ -77,6 +77,7 @@ export default class Checkbox extends SvelteComponentTyped< mouseenter: WindowEventMap["mouseenter"]; mouseleave: WindowEventMap["mouseleave"]; change: WindowEventMap["change"]; + blur: WindowEventMap["blur"]; }, - {} + { labelText: {} } > {} diff --git a/types/CodeSnippet/CodeSnippet.d.ts b/types/CodeSnippet/CodeSnippet.d.ts index c53d589a..d9e72a38 100644 --- a/types/CodeSnippet/CodeSnippet.d.ts +++ b/types/CodeSnippet/CodeSnippet.d.ts @@ -15,6 +15,12 @@ export interface CodeSnippetProps { */ code?: string; + /** + * Override the default copy behavior of using the navigator.clipboard.writeText API to copy text + * @default async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } } + */ + copy?: (code: string) => void; + /** * Set to `true` to expand a multi-line code snippet (type="multi") * @default false diff --git a/types/ComboBox/ComboBox.d.ts b/types/ComboBox/ComboBox.d.ts index 72e0abf8..d1b0cd4b 100644 --- a/types/ComboBox/ComboBox.d.ts +++ b/types/ComboBox/ComboBox.d.ts @@ -147,10 +147,17 @@ export default class ComboBox extends SvelteComponentTyped< selectedItem: ComboBoxItem; }>; keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; clear: WindowEventMap["clear"]; scroll: WindowEventMap["scroll"]; }, {} -> {} +> { + /** + * Clear the combo box programmatically + * @default () => { selectedIndex = -1; highlightedIndex = -1; open = false; inputValue = ""; ref?.focus(); } + */ + clear: () => void; +} diff --git a/types/ComposedModal/ComposedModal.d.ts b/types/ComposedModal/ComposedModal.d.ts index 821b0566..0441eae5 100644 --- a/types/ComposedModal/ComposedModal.d.ts +++ b/types/ComposedModal/ComposedModal.d.ts @@ -49,11 +49,13 @@ export default class ComposedModal extends SvelteComponentTyped< ComposedModalProps, { transitionend: CustomEvent<{ open: boolean }>; + keydown: WindowEventMap["keydown"]; click: WindowEventMap["click"]; mouseover: WindowEventMap["mouseover"]; mouseenter: WindowEventMap["mouseenter"]; mouseleave: WindowEventMap["mouseleave"]; submit: CustomEvent; + ["click:button--primary"]: CustomEvent; close: CustomEvent; open: CustomEvent; }, diff --git a/types/ComposedModal/ModalFooter.d.ts b/types/ComposedModal/ModalFooter.d.ts index 8eb5a2c3..eaf9a749 100644 --- a/types/ComposedModal/ModalFooter.d.ts +++ b/types/ComposedModal/ModalFooter.d.ts @@ -26,6 +26,13 @@ export interface ModalFooterProps */ secondaryButtonText?: string; + /** + * 2-tuple prop to render two secondary buttons for a 3 button modal + * supersedes `secondaryButtonText` + * @default [] + */ + secondaryButtons?: [{ text: string }, { text: string }]; + /** * Specify a class for the secondary button */ @@ -40,6 +47,6 @@ export interface ModalFooterProps export default class ModalFooter extends SvelteComponentTyped< ModalFooterProps, - {}, + { ["click:button--secondary"]: CustomEvent<{ text: string }> }, { default: {} } > {} diff --git a/types/CopyButton/CopyButton.d.ts b/types/CopyButton/CopyButton.d.ts index fed3e37a..8dd5ece9 100644 --- a/types/CopyButton/CopyButton.d.ts +++ b/types/CopyButton/CopyButton.d.ts @@ -13,6 +13,12 @@ export interface CopyButtonProps extends CopyProps { * Specify the text to copy */ text?: string; + + /** + * Override the default copy behavior of using the navigator.clipboard.writeText API to copy text + * @default async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } } + */ + copy?: (text: string) => void; } export default class CopyButton extends SvelteComponentTyped< diff --git a/types/DataTable/DataTable.d.ts b/types/DataTable/DataTable.d.ts index 66812d6a..8e4b57ca 100644 --- a/types/DataTable/DataTable.d.ts +++ b/types/DataTable/DataTable.d.ts @@ -28,11 +28,12 @@ export interface DataTableRow { [key: string]: DataTableValue; } -export type DataTableRowId = string; +export type DataTableRowId = any; export interface DataTableCell { key: DataTableKey; value: DataTableValue; + display?: (item: Value) => DataTableValue; } export interface DataTableProps @@ -53,7 +54,7 @@ export interface DataTableProps /** * Set the size of the data table */ - size?: "compact" | "short" | "tall"; + size?: "compact" | "short" | "medium" | "tall"; /** * Specify the title of the data table @@ -128,6 +129,12 @@ export interface DataTableProps * @default false */ stickyHeader?: boolean; + + /** + * Set to `true` to use static width + * @default false + */ + useStaticWidth?: boolean; } export default class DataTable extends SvelteComponentTyped< @@ -156,6 +163,8 @@ export default class DataTable extends SvelteComponentTyped< default: {}; cell: { row: DataTableRow; cell: DataTableCell }; ["cell-header"]: { header: DataTableNonEmptyHeader }; + description: {}; ["expanded-row"]: { row: DataTableRow }; + title: {}; } > {} diff --git a/types/DataTable/Table.d.ts b/types/DataTable/Table.d.ts index 6e9cf0de..6c951052 100644 --- a/types/DataTable/Table.d.ts +++ b/types/DataTable/Table.d.ts @@ -6,7 +6,7 @@ export interface TableProps /** * Set the size of the table */ - size?: "compact" | "short" | "tall"; + size?: "compact" | "short" | "medium" | "tall"; /** * Set to `true` to use zebra styles diff --git a/types/DataTable/TableContainer.d.ts b/types/DataTable/TableContainer.d.ts index bcdeed1c..533e057a 100644 --- a/types/DataTable/TableContainer.d.ts +++ b/types/DataTable/TableContainer.d.ts @@ -20,6 +20,12 @@ export interface TableContainerProps * @default false */ stickyHeader?: boolean; + + /** + * Set to `true` to use static width + * @default false + */ + useStaticWidth?: boolean; } export default class TableContainer extends SvelteComponentTyped< diff --git a/types/DataTable/ToolbarBatchActions.d.ts b/types/DataTable/ToolbarBatchActions.d.ts index e046a567..3c1f46a6 100644 --- a/types/DataTable/ToolbarBatchActions.d.ts +++ b/types/DataTable/ToolbarBatchActions.d.ts @@ -13,5 +13,5 @@ export interface ToolbarBatchActionsProps export default class ToolbarBatchActions extends SvelteComponentTyped< ToolbarBatchActionsProps, {}, - { default: {} } + { default: {}; cancel: {} } > {} diff --git a/types/DataTable/ToolbarSearch.d.ts b/types/DataTable/ToolbarSearch.d.ts index 2532d644..b3ced787 100644 --- a/types/DataTable/ToolbarSearch.d.ts +++ b/types/DataTable/ToolbarSearch.d.ts @@ -1,7 +1,8 @@ /// import { SvelteComponentTyped } from "svelte"; -export interface ToolbarSearchProps { +export interface ToolbarSearchProps + extends svelte.JSX.HTMLAttributes { /** * Specify the value of the search input * @default "" diff --git a/types/DatePicker/DatePicker.d.ts b/types/DatePicker/DatePicker.d.ts index 1ea59415..7e5102c7 100644 --- a/types/DatePicker/DatePicker.d.ts +++ b/types/DatePicker/DatePicker.d.ts @@ -16,9 +16,18 @@ export interface DatePickerProps value?: number | string; /** - * Specify the element to append the calendar to + * Specify the date picker start date value (from) + * Only works with the "range" date picker type + * @default "" */ - appendTo?: HTMLElement; + valueFrom?: string; + + /** + * Specify the date picker end date value (to) + * Only works with the "range" date picker type + * @default "" + */ + valueTo?: string; /** * Specify the date format @@ -61,16 +70,29 @@ export interface DatePickerProps * @default "ccs-" + Math.random().toString(36) */ id?: string; + + /** + * Override the options passed to the Flatpickr instance + * https://flatpickr.js.org/options + * @default {} + */ + flatpickrProps?: import("flatpickr/dist/types/options").Options; } export default class DatePicker extends SvelteComponentTyped< DatePickerProps, { + change: CustomEvent< + | string + | { + selectedDates: [dateFrom: Date, dateTo?: Date]; + dateStr: string | { from: string; to: string }; + } + >; click: WindowEventMap["click"]; mouseover: WindowEventMap["mouseover"]; mouseenter: WindowEventMap["mouseenter"]; mouseleave: WindowEventMap["mouseleave"]; - change: CustomEvent; }, { default: {} } > {} diff --git a/types/DatePicker/DatePickerInput.d.ts b/types/DatePicker/DatePickerInput.d.ts index 1a6c24d1..0e9c4a48 100644 --- a/types/DatePicker/DatePickerInput.d.ts +++ b/types/DatePicker/DatePickerInput.d.ts @@ -32,6 +32,12 @@ export interface DatePickerInputProps */ disabled?: boolean; + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + /** * Specify the ARIA label for the calendar icon * @default "" @@ -97,7 +103,8 @@ export default class DatePickerInput extends SvelteComponentTyped< { input: WindowEventMap["input"]; keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; blur: WindowEventMap["blur"]; }, - {} + { labelText: {} } > {} diff --git a/types/FileUploader/FileUploader.d.ts b/types/FileUploader/FileUploader.d.ts index f311158f..bc35defb 100644 --- a/types/FileUploader/FileUploader.d.ts +++ b/types/FileUploader/FileUploader.d.ts @@ -27,13 +27,6 @@ export interface FileUploaderProps */ multiple?: boolean; - /** - * Override the default behavior of clearing the array of uploaded files - * @constant - * @default () => { files = []; } - */ - clearFiles?: () => void; - /** * Specify the label description * @default "" @@ -84,4 +77,11 @@ export default class FileUploader extends SvelteComponentTyped< keydown: WindowEventMap["keydown"]; }, {} -> {} +> { + /** + * Override the default behavior of clearing the array of uploaded files + * @constant + * @default () => { files = []; } + */ + clearFiles: () => void; +} diff --git a/types/FileUploader/FileUploaderButton.d.ts b/types/FileUploader/FileUploaderButton.d.ts index c30bca3e..10574a6d 100644 --- a/types/FileUploader/FileUploaderButton.d.ts +++ b/types/FileUploader/FileUploaderButton.d.ts @@ -77,5 +77,5 @@ export default class FileUploaderButton extends SvelteComponentTyped< change: WindowEventMap["change"]; click: WindowEventMap["click"]; }, - {} + { labelText: {} } > {} diff --git a/types/FileUploader/FileUploaderDropContainer.d.ts b/types/FileUploader/FileUploaderDropContainer.d.ts index e648a040..31e6542d 100644 --- a/types/FileUploader/FileUploaderDropContainer.d.ts +++ b/types/FileUploader/FileUploaderDropContainer.d.ts @@ -76,5 +76,5 @@ export default class FileUploaderDropContainer extends SvelteComponentTyped< change: WindowEventMap["change"]; click: WindowEventMap["click"]; }, - {} + { labelText: {} } > {} diff --git a/types/FileUploader/FileUploaderItem.d.ts b/types/FileUploader/FileUploaderItem.d.ts index 35f71b9a..562554af 100644 --- a/types/FileUploader/FileUploaderItem.d.ts +++ b/types/FileUploader/FileUploaderItem.d.ts @@ -9,6 +9,12 @@ export interface FileUploaderItemProps */ status?: "uploading" | "edit" | "complete"; + /** + * Specify the size of button skeleton + * @default "default" + */ + size?: "default" | "field" | "small"; + /** * Specify the ARIA label used for the status icons * @default "" diff --git a/types/FormGroup/FormGroup.d.ts b/types/FormGroup/FormGroup.d.ts index a9e7dd5b..15fd6c07 100644 --- a/types/FormGroup/FormGroup.d.ts +++ b/types/FormGroup/FormGroup.d.ts @@ -3,6 +3,12 @@ import { SvelteComponentTyped } from "svelte"; export interface FormGroupProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` for to remove the bottom margin + * @default false + */ + noMargin?: boolean; + /** * Set to `true` to indicate an invalid state * @default false @@ -15,12 +21,6 @@ export interface FormGroupProps */ message?: boolean; - /** - * Set to `true` for to remove the bottom margin - * @default false - */ - noMargin?: boolean; - /** * Specify the message text * @default "" @@ -32,6 +32,12 @@ export interface FormGroupProps * @default "" */ legendText?: string; + + /** + * Specify an id for the legend element + * @default "" + */ + legendId?: string; } export default class FormGroup extends SvelteComponentTyped< diff --git a/types/ImageLoader/ImageLoader.d.ts b/types/ImageLoader/ImageLoader.d.ts index 688bf84c..9df7ea8d 100644 --- a/types/ImageLoader/ImageLoader.d.ts +++ b/types/ImageLoader/ImageLoader.d.ts @@ -18,7 +18,7 @@ export interface ImageLoaderProps /** * Specify the aspect ratio for the image wrapper */ - ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"; + ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"; /** * Set to `true` when `loaded` is `true` and `error` is false @@ -44,17 +44,17 @@ export interface ImageLoaderProps * @default false */ fadeIn?: boolean; - - /** - * Method invoked to load the image provided a `src` value - * @constant - * @default (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } - */ - loadImage?: (url?: string) => void; } export default class ImageLoader extends SvelteComponentTyped< ImageLoaderProps, { load: CustomEvent; error: CustomEvent }, { error: {}; loading: {} } -> {} +> { + /** + * Method invoked to load the image provided a `src` value + * @constant + * @default (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } + */ + loadImage: (url?: string) => void; +} diff --git a/types/Link/Link.d.ts b/types/Link/Link.d.ts index d8dd0993..759fbd30 100644 --- a/types/Link/Link.d.ts +++ b/types/Link/Link.d.ts @@ -19,6 +19,12 @@ export interface LinkProps */ inline?: boolean; + /** + * Specify the icon from `carbon-icons-svelte` to render + * `inline` must be `false` + */ + icon?: typeof import("carbon-icons-svelte").CarbonIcon; + /** * Set to `true` to disable the checkbox * @default false diff --git a/types/ListBox/ListBoxField.d.ts b/types/ListBox/ListBoxField.d.ts index 5863dd1c..24511edd 100644 --- a/types/ListBox/ListBoxField.d.ts +++ b/types/ListBox/ListBoxField.d.ts @@ -23,13 +23,6 @@ export interface ListBoxFieldProps */ tabindex?: string; - /** - * Default translation ids - * @constant - * @default { close: "close", open: "open" } - */ - translationIds?: { close: "close"; open: "open" }; - /** * Override the default translation ids * @default (id) => defaultTranslations[id] @@ -57,7 +50,15 @@ export default class ListBoxField extends SvelteComponentTyped< mouseenter: WindowEventMap["mouseenter"]; mouseleave: WindowEventMap["mouseleave"]; keydown: WindowEventMap["keydown"]; + focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; }, { default: {} } -> {} +> { + /** + * Default translation ids + * @constant + * @default { close: "close", open: "open" } + */ + translationIds: { close: "close"; open: "open" }; +} diff --git a/types/ListBox/ListBoxMenuIcon.d.ts b/types/ListBox/ListBoxMenuIcon.d.ts index df402fc6..1182bb2a 100644 --- a/types/ListBox/ListBoxMenuIcon.d.ts +++ b/types/ListBox/ListBoxMenuIcon.d.ts @@ -11,13 +11,6 @@ export interface ListBoxMenuIconProps */ open?: boolean; - /** - * Default translation ids - * @constant - * @default { close: "close", open: "open" } - */ - translationIds?: { close: "close"; open: "open" }; - /** * Override the default translation ids * @default (id) => defaultTranslations[id] @@ -29,4 +22,11 @@ export default class ListBoxMenuIcon extends SvelteComponentTyped< ListBoxMenuIconProps, { click: WindowEventMap["click"] }, {} -> {} +> { + /** + * Default translation ids + * @constant + * @default { close: "close", open: "open" } + */ + translationIds: { close: "close"; open: "open" }; +} diff --git a/types/ListBox/ListBoxSelection.d.ts b/types/ListBox/ListBoxSelection.d.ts index 134e969f..22d66d29 100644 --- a/types/ListBox/ListBoxSelection.d.ts +++ b/types/ListBox/ListBoxSelection.d.ts @@ -16,13 +16,6 @@ export interface ListBoxSelectionProps */ disabled?: boolean; - /** - * Default translation ids - * @constant - * @default { clearAll: "clearAll", clearSelection: "clearSelection", } - */ - translationIds?: { clearAll: "clearAll"; clearSelection: "clearSelection" }; - /** * Override the default translation ids * @default (id) => defaultTranslations[id] @@ -40,4 +33,11 @@ export default class ListBoxSelection extends SvelteComponentTyped< ListBoxSelectionProps, { clear: CustomEvent }, {} -> {} +> { + /** + * Default translation ids + * @constant + * @default { clearAll: "clearAll", clearSelection: "clearSelection", } + */ + translationIds: { clearAll: "clearAll"; clearSelection: "clearSelection" }; +} diff --git a/types/LocalStorage/LocalStorage.d.ts b/types/LocalStorage/LocalStorage.d.ts index f0c93cd5..56559cf0 100644 --- a/types/LocalStorage/LocalStorage.d.ts +++ b/types/LocalStorage/LocalStorage.d.ts @@ -22,4 +22,16 @@ export default class LocalStorage extends SvelteComponentTyped< update: CustomEvent<{ prevValue: any; value: any }>; }, {} -> {} +> { + /** + * Remove the persisted key value from the browser's local storage + * @default () => { localStorage.removeItem(key); } + */ + clearItem: () => void; + + /** + * Clear all key values from the browser's local storage + * @default () => { localStorage.clear(); } + */ + clearAll: () => void; +} diff --git a/types/Modal/Modal.d.ts b/types/Modal/Modal.d.ts index e33dddad..bc27704d 100644 --- a/types/Modal/Modal.d.ts +++ b/types/Modal/Modal.d.ts @@ -89,6 +89,13 @@ export interface ModalProps */ secondaryButtonText?: string; + /** + * 2-tuple prop to render two secondary buttons for a 3 button modal + * supersedes `secondaryButtonText` + * @default [] + */ + secondaryButtons?: [{ text: string }, { text: string }]; + /** * Specify a selector to be focused when opening the modal * @default "[data-modal-primary-focus]" @@ -118,13 +125,14 @@ export default class Modal extends SvelteComponentTyped< ModalProps, { transitionend: CustomEvent<{ open: boolean }>; + ["click:button--secondary"]: CustomEvent<{ text: string }>; keydown: WindowEventMap["keydown"]; click: WindowEventMap["click"]; mouseover: WindowEventMap["mouseover"]; mouseenter: WindowEventMap["mouseenter"]; mouseleave: WindowEventMap["mouseleave"]; submit: CustomEvent; - ["click:button--secondary"]: CustomEvent; + ["click:button--primary"]: CustomEvent; close: CustomEvent; open: CustomEvent; }, diff --git a/types/MultiSelect/MultiSelect.d.ts b/types/MultiSelect/MultiSelect.d.ts index fc86d082..fd0a1abe 100644 --- a/types/MultiSelect/MultiSelect.d.ts +++ b/types/MultiSelect/MultiSelect.d.ts @@ -180,6 +180,24 @@ export interface MultiSelectProps * @default null */ inputRef?: null | HTMLInputElement; + + /** + * Obtain a reference to the outer div element + * @default null + */ + multiSelectRef?: null | HTMLDivElement; + + /** + * Obtain a reference to the field box element + * @default null + */ + fieldRef?: null | HTMLDivElement; + + /** + * Obtain a reference to the selection element + * @default null + */ + selectionRef?: null | HTMLDivElement; } export default class MultiSelect extends SvelteComponentTyped< @@ -192,6 +210,7 @@ export default class MultiSelect extends SvelteComponentTyped< }>; clear: CustomEvent; keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; }, diff --git a/types/NumberInput/NumberInput.d.ts b/types/NumberInput/NumberInput.d.ts index cb227327..a9bf7aec 100644 --- a/types/NumberInput/NumberInput.d.ts +++ b/types/NumberInput/NumberInput.d.ts @@ -62,6 +62,12 @@ export interface NumberInputProps */ disabled?: boolean; + /** + * Set to `true` to hide the input stepper buttons + * @default false + */ + hideSteppers?: boolean; + /** * Specify the ARIA label for the increment icons * @default "" @@ -116,13 +122,6 @@ export interface NumberInputProps */ translateWithId?: (id: NumberInputTranslationId) => string; - /** - * Default translation ids - * @constant - * @default { increment: "increment", decrement: "decrement", } - */ - translationIds?: { increment: "increment"; decrement: "decrement" }; - /** * Set an id for the input element * @default "ccs-" + Math.random().toString(36) @@ -152,4 +151,11 @@ export default class NumberInput extends SvelteComponentTyped< input: WindowEventMap["input"]; }, { label: {} } -> {} +> { + /** + * Default translation ids + * @constant + * @default { increment: "increment", decrement: "decrement", } + */ + translationIds: { increment: "increment"; decrement: "decrement" }; +} diff --git a/types/OrderedList/OrderedList.d.ts b/types/OrderedList/OrderedList.d.ts index f44bda3c..23c58485 100644 --- a/types/OrderedList/OrderedList.d.ts +++ b/types/OrderedList/OrderedList.d.ts @@ -14,6 +14,12 @@ export interface OrderedListProps * @default false */ native?: boolean; + + /** + * Set to `true` to use Carbon's expressive typesetting + * @default false + */ + expressive?: boolean; } export default class OrderedList extends SvelteComponentTyped< diff --git a/types/ProgressBar/ProgressBar.d.ts b/types/ProgressBar/ProgressBar.d.ts new file mode 100644 index 00000000..bd1d7ed7 --- /dev/null +++ b/types/ProgressBar/ProgressBar.d.ts @@ -0,0 +1,46 @@ +/// +import { SvelteComponentTyped } from "svelte"; + +export interface ProgressBarProps + extends svelte.JSX.HTMLAttributes { + /** + * Specify the current value + */ + value?: number; + + /** + * Specify the maximum value + * @default 100 + */ + max?: number; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Set an id for the progress bar element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; +} + +export default class ProgressBar extends SvelteComponentTyped< + ProgressBarProps, + {}, + { labelText: {} } +> {} diff --git a/types/README.md b/types/README.md index 51847b04..79a1ed3e 100644 --- a/types/README.md +++ b/types/README.md @@ -1,6 +1,6 @@ # types -The TypeScript definitions in this folder are auto-generated by [sveld](https://github.com/ibm/sveld). +The TypeScript definitions in this folder are auto-generated by [sveld](https://github.com/carbon-design-system/sveld). Do not edit these types directly. To add or update property types or definitions, update the JSDoc annotations in the component source code in the [src](../src) folder. diff --git a/types/RadioButton/RadioButton.d.ts b/types/RadioButton/RadioButton.d.ts index 70ebec13..aa284786 100644 --- a/types/RadioButton/RadioButton.d.ts +++ b/types/RadioButton/RadioButton.d.ts @@ -61,5 +61,5 @@ export interface RadioButtonProps export default class RadioButton extends SvelteComponentTyped< RadioButtonProps, { change: WindowEventMap["change"] }, - {} + { labelText: {} } > {} diff --git a/types/RecursiveList/RecursiveList.d.ts b/types/RecursiveList/RecursiveList.d.ts new file mode 100644 index 00000000..346e0e56 --- /dev/null +++ b/types/RecursiveList/RecursiveList.d.ts @@ -0,0 +1,30 @@ +/// +import { SvelteComponentTyped } from "svelte"; + +export interface RecursiveListNode { + text?: string; + href?: string; + html?: string; +} + +export interface RecursiveListProps + extends svelte.JSX.HTMLAttributes, + svelte.JSX.HTMLAttributes { + /** + * Specify the children to render + * @default [] + */ + children?: Array; + + /** + * Specify the type of list to render + * @default "unordered" + */ + type?: "unordered" | "ordered" | "ordered-native"; +} + +export default class RecursiveList extends SvelteComponentTyped< + RecursiveListProps, + {}, + {} +> {} diff --git a/types/Search/Search.d.ts b/types/Search/Search.d.ts index ce62a728..8a38c411 100644 --- a/types/Search/Search.d.ts +++ b/types/Search/Search.d.ts @@ -37,6 +37,18 @@ export interface SearchProps { */ disabled?: boolean; + /** + * Set to `true` to enable the expandable variant + * @default false + */ + expandable?: boolean; + + /** + * Set to `true to expand the search input + * @default false + */ + expanded?: boolean; + /** * Specify the value of the search input * @default "" @@ -79,6 +91,11 @@ export interface SearchProps { */ labelText?: string; + /** + * Specify the icon from `carbon-icons-svelte` to render + */ + icon?: typeof import("carbon-icons-svelte").CarbonIcon; + /** * Set an id for the input element * @default "ccs-" + Math.random().toString(36) @@ -95,6 +112,8 @@ export interface SearchProps { export default class Search extends SvelteComponentTyped< SearchProps, { + expand: CustomEvent; + collapse: CustomEvent; click: WindowEventMap["click"]; mouseover: WindowEventMap["mouseover"]; mouseenter: WindowEventMap["mouseenter"]; @@ -104,7 +123,8 @@ export default class Search extends SvelteComponentTyped< focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; clear: CustomEvent; }, - {} + { labelText: {} } > {} diff --git a/types/Select/Select.d.ts b/types/Select/Select.d.ts index 93bc7546..2dd564f3 100644 --- a/types/Select/Select.d.ts +++ b/types/Select/Select.d.ts @@ -99,6 +99,11 @@ export interface SelectProps export default class Select extends SvelteComponentTyped< SelectProps, - { change: CustomEvent; blur: WindowEventMap["blur"] }, - { default: {} } + { + change: CustomEvent; + input: WindowEventMap["input"]; + focus: WindowEventMap["focus"]; + blur: WindowEventMap["blur"]; + }, + { default: {}; labelText: {} } > {} diff --git a/types/Slider/Slider.d.ts b/types/Slider/Slider.d.ts index 66e7e1af..ba367757 100644 --- a/types/Slider/Slider.d.ts +++ b/types/Slider/Slider.d.ts @@ -115,5 +115,5 @@ export default class Slider extends SvelteComponentTyped< mouseleave: WindowEventMap["mouseleave"]; change: CustomEvent; }, - {} + { labelText: {} } > {} diff --git a/types/StructuredList/StructuredList.d.ts b/types/StructuredList/StructuredList.d.ts index e405578f..e18d31bb 100644 --- a/types/StructuredList/StructuredList.d.ts +++ b/types/StructuredList/StructuredList.d.ts @@ -14,6 +14,18 @@ export interface StructuredListProps */ border?: boolean; + /** + * Set to `true` to use the condensed variant + * @default false + */ + condensed?: boolean; + + /** + * Set to `true` to flush the list + * @default false + */ + flush?: boolean; + /** * Set to `true` to use the selection variant * @default false diff --git a/types/TextArea/TextArea.d.ts b/types/TextArea/TextArea.d.ts index ee686e8f..71d4d6c0 100644 --- a/types/TextArea/TextArea.d.ts +++ b/types/TextArea/TextArea.d.ts @@ -96,8 +96,10 @@ export default class TextArea extends SvelteComponentTyped< mouseleave: WindowEventMap["mouseleave"]; change: WindowEventMap["change"]; input: WindowEventMap["input"]; + keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; }, - {} + { labelText: {} } > {} diff --git a/types/TextInput/PasswordInput.d.ts b/types/TextInput/PasswordInput.d.ts index 55ab9b10..defdfffc 100644 --- a/types/TextInput/PasswordInput.d.ts +++ b/types/TextInput/PasswordInput.d.ts @@ -92,6 +92,24 @@ export interface PasswordInputProps */ invalidText?: string; + /** + * Set to `true` to indicate an warning state + * @default false + */ + warn?: boolean; + + /** + * Specify the warning state text + * @default "" + */ + warnText?: string; + + /** + * Set to `true` to use inline version + * @default false + */ + inline?: boolean; + /** * Set an id for the input element * @default "ccs-" + Math.random().toString(36) @@ -120,8 +138,9 @@ export default class PasswordInput extends SvelteComponentTyped< change: WindowEventMap["change"]; input: WindowEventMap["input"]; keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; }, - {} + { labelText: {} } > {} diff --git a/types/TextInput/TextInput.d.ts b/types/TextInput/TextInput.d.ts index 848a075e..3ac1a155 100644 --- a/types/TextInput/TextInput.d.ts +++ b/types/TextInput/TextInput.d.ts @@ -104,10 +104,16 @@ export interface TextInputProps required?: boolean; /** - * Set to `true` to use inline version + * Set to `true` to use the inline variant * @default false */ inline?: boolean; + + /** + * Set to `true` to use the read-only variant + * @default false + */ + readonly?: boolean; } export default class TextInput extends SvelteComponentTyped< @@ -120,8 +126,9 @@ export default class TextInput extends SvelteComponentTyped< change: WindowEventMap["change"]; input: WindowEventMap["input"]; keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; }, - {} + { labelText: {} } > {} diff --git a/types/Theme/Theme.d.ts b/types/Theme/Theme.d.ts new file mode 100644 index 00000000..16d10f38 --- /dev/null +++ b/types/Theme/Theme.d.ts @@ -0,0 +1,56 @@ +/// +import { SvelteComponentTyped } from "svelte"; + +export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; + +export interface ThemeProps { + /** + * Set the current Carbon theme + * @default "white" + */ + theme?: CarbonTheme; + + /** + * Customize a theme with your own tokens + * https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme + * @default {} + */ + tokens?: { [token: string]: any }; + + /** + * Set to `true` to persist the theme using window.localStorage + * @default false + */ + persist?: boolean; + + /** + * Specify the local storage key + * @default "theme" + */ + persistKey?: string; + + /** + * Render a toggle or select dropdown to control the theme + */ + render?: "toggle" | "select"; + + /** + * Override the default toggle props + * @default { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } + */ + toggle?: import("../Toggle/Toggle").ToggleProps & { + themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; + }; + + /** + * Override the default select props + * @default { themes: themeKeys, labelText: "Themes", hideLabel: false, } + */ + select?: import("../Select/Select").SelectProps & { themes?: CarbonTheme[] }; +} + +export default class Theme extends SvelteComponentTyped< + ThemeProps, + { update: CustomEvent<{ theme: CarbonTheme }> }, + { default: { theme: CarbonTheme } } +> {} diff --git a/types/Tile/ClickableTile.d.ts b/types/Tile/ClickableTile.d.ts index 53fbd078..0cae6f9f 100644 --- a/types/Tile/ClickableTile.d.ts +++ b/types/Tile/ClickableTile.d.ts @@ -2,7 +2,8 @@ import { SvelteComponentTyped } from "svelte"; export interface ClickableTileProps - extends svelte.JSX.HTMLAttributes { + extends svelte.JSX.HTMLAttributes, + svelte.JSX.HTMLAttributes { /** * Set to `true` to click the tile * @default false @@ -15,6 +16,12 @@ export interface ClickableTileProps */ light?: boolean; + /** + * Set to `true` to disable the tile + * @default false + */ + disabled?: boolean; + /** * Set the `href` */ diff --git a/types/TimePicker/TimePicker.d.ts b/types/TimePicker/TimePicker.d.ts index 524f480a..f5e9db5c 100644 --- a/types/TimePicker/TimePicker.d.ts +++ b/types/TimePicker/TimePicker.d.ts @@ -101,8 +101,10 @@ export default class TimePicker extends SvelteComponentTyped< mouseleave: WindowEventMap["mouseleave"]; change: WindowEventMap["change"]; input: WindowEventMap["input"]; + keydown: WindowEventMap["keydown"]; + keyup: WindowEventMap["keyup"]; focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; }, - { default: {} } + { default: {}; labelText: {} } > {} diff --git a/types/TimePicker/TimePickerSelect.d.ts b/types/TimePicker/TimePickerSelect.d.ts index c39d43ee..7d970c9b 100644 --- a/types/TimePicker/TimePickerSelect.d.ts +++ b/types/TimePicker/TimePickerSelect.d.ts @@ -58,5 +58,5 @@ export default class TimePickerSelect extends SvelteComponentTyped< mouseenter: WindowEventMap["mouseenter"]; mouseleave: WindowEventMap["mouseleave"]; }, - { default: {} } + { default: {}; labelText: {} } > {} diff --git a/types/Toggle/Toggle.d.ts b/types/Toggle/Toggle.d.ts index ac607251..78c4ebaa 100644 --- a/types/Toggle/Toggle.d.ts +++ b/types/Toggle/Toggle.d.ts @@ -64,5 +64,5 @@ export default class Toggle extends SvelteComponentTyped< focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; }, - {} + { labelText: {} } > {} diff --git a/types/Toggle/ToggleSkeleton.d.ts b/types/Toggle/ToggleSkeleton.d.ts index 54918ff1..f578b959 100644 --- a/types/Toggle/ToggleSkeleton.d.ts +++ b/types/Toggle/ToggleSkeleton.d.ts @@ -30,5 +30,5 @@ export default class ToggleSkeleton extends SvelteComponentTyped< mouseenter: WindowEventMap["mouseenter"]; mouseleave: WindowEventMap["mouseleave"]; }, - {} + { labelText: {} } > {} diff --git a/types/TooltipDefinition/TooltipDefinition.d.ts b/types/TooltipDefinition/TooltipDefinition.d.ts index 69290407..0c1d70cb 100644 --- a/types/TooltipDefinition/TooltipDefinition.d.ts +++ b/types/TooltipDefinition/TooltipDefinition.d.ts @@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte"; export interface TooltipDefinitionProps - extends svelte.JSX.HTMLAttributes { + extends svelte.JSX.HTMLAttributes { /** * Specify the tooltip text * @default "" diff --git a/types/TooltipIcon/TooltipIcon.d.ts b/types/TooltipIcon/TooltipIcon.d.ts index 3dfe4492..631511dd 100644 --- a/types/TooltipIcon/TooltipIcon.d.ts +++ b/types/TooltipIcon/TooltipIcon.d.ts @@ -10,6 +10,17 @@ export interface TooltipIconProps */ tooltipText?: string; + /** + * Specify the icon from `carbon-icons-svelte` to render + */ + icon?: typeof import("carbon-icons-svelte").CarbonIcon; + + /** + * Set to `true` to disable the tooltip icon + * @default false + */ + disabled?: boolean; + /** * Set the alignment of the tooltip relative to the icon * @default "center" diff --git a/types/TreeView/TreeView.d.ts b/types/TreeView/TreeView.d.ts new file mode 100644 index 00000000..15c352c3 --- /dev/null +++ b/types/TreeView/TreeView.d.ts @@ -0,0 +1,69 @@ +/// +import { SvelteComponentTyped } from "svelte"; + +export type TreeNodeId = string | number; + +export interface TreeNode { + id: TreeNodeId; + text: string; + icon?: typeof import("carbon-icons-svelte").CarbonIcon; + disabled?: boolean; + expanded?: boolean; +} + +export interface TreeViewProps + extends svelte.JSX.HTMLAttributes { + /** + * Provide an array of children nodes to render + * @default [] + */ + children?: Array; + + /** + * Set the current active node id + * Only one node can be active + * @default "" + */ + activeId?: TreeNodeId; + + /** + * Set the node ids to be selected + * @default [] + */ + selectedIds?: TreeNodeId[]; + + /** + * Set the node ids to be expanded + * @default [] + */ + expandedIds?: TreeNodeId[]; + + /** + * Specify the TreeView size + * @default "default" + */ + size?: "default" | "compact"; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; +} + +export default class TreeView extends SvelteComponentTyped< + TreeViewProps, + { + select: CustomEvent; + toggle: CustomEvent; + focus: CustomEvent; + keydown: WindowEventMap["keydown"]; + }, + { labelText: {} } +> {} diff --git a/types/UIShell/GlobalHeader/Header.d.ts b/types/UIShell/GlobalHeader/Header.d.ts index 676f328e..4c61fd74 100644 --- a/types/UIShell/GlobalHeader/Header.d.ts +++ b/types/UIShell/GlobalHeader/Header.d.ts @@ -43,11 +43,35 @@ export interface HeaderProps */ persistentHamburgerMenu?: boolean; + /** + * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden + * 1056 represents the "large" breakpoint in pixels from the Carbon Design System: + * small: 320 + * medium: 672 + * large: 1056 + * x-large: 1312 + * max: 1584 + * @default 1056 + */ + expansionBreakpoint?: number; + /** * Obtain a reference to the HTML anchor element * @default null */ ref?: null | HTMLAnchorElement; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the closed state + * Defaults to `Menu20` + */ + iconMenu?: typeof import("carbon-icons-svelte").CarbonIcon; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the opened state + * Defaults to `Close20` + */ + iconClose?: typeof import("carbon-icons-svelte").CarbonIcon; } export default class Header extends SvelteComponentTyped< diff --git a/types/UIShell/GlobalHeader/HeaderNavItem.d.ts b/types/UIShell/GlobalHeader/HeaderNavItem.d.ts index 6309cc47..4144a4a6 100644 --- a/types/UIShell/GlobalHeader/HeaderNavItem.d.ts +++ b/types/UIShell/GlobalHeader/HeaderNavItem.d.ts @@ -13,6 +13,12 @@ export interface HeaderNavItemProps */ text?: string; + /** + * Set to `true` to select the item + * @default false + */ + isSelected?: boolean; + /** * Obtain a reference to the HTML anchor element * @default null diff --git a/types/UIShell/SideNav/SideNav.d.ts b/types/UIShell/SideNav/SideNav.d.ts index ecec9933..0d7a2a5b 100644 --- a/types/UIShell/SideNav/SideNav.d.ts +++ b/types/UIShell/SideNav/SideNav.d.ts @@ -9,6 +9,12 @@ export interface SideNavProps */ fixed?: boolean; + /** + * Set to `true` to use the rail variant + * @default false + */ + rail?: boolean; + /** * Specify the ARIA label for the nav */ @@ -19,10 +25,26 @@ export interface SideNavProps * @default false */ isOpen?: boolean; + + /** + * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden + * 1056 represents the "large" breakpoint in pixels from the Carbon Design System: + * small: 320 + * medium: 672 + * large: 1056 + * x-large: 1312 + * max: 1584 + * @default 1056 + */ + expansionBreakpoint?: number; } export default class SideNav extends SvelteComponentTyped< SideNavProps, - {}, + { + open: CustomEvent; + close: CustomEvent; + ["click:overlay"]: CustomEvent; + }, { default: {} } > {} diff --git a/types/UIShell/SideNav/SideNavMenuItem.d.ts b/types/UIShell/SideNav/SideNavMenuItem.d.ts index 6f2df8d8..950ebb12 100644 --- a/types/UIShell/SideNav/SideNavMenuItem.d.ts +++ b/types/UIShell/SideNav/SideNavMenuItem.d.ts @@ -5,6 +5,7 @@ export interface SideNavMenuItemProps extends svelte.JSX.HTMLAttributes { /** * Set to `true` to select the item + * @default false */ isSelected?: boolean; diff --git a/types/UnorderedList/UnorderedList.d.ts b/types/UnorderedList/UnorderedList.d.ts index debfbdbf..440c5387 100644 --- a/types/UnorderedList/UnorderedList.d.ts +++ b/types/UnorderedList/UnorderedList.d.ts @@ -8,6 +8,12 @@ export interface UnorderedListProps * @default false */ nested?: boolean; + + /** + * Set to `true` to use Carbon's expressive typesetting + * @default false + */ + expressive?: boolean; } export default class UnorderedList extends SvelteComponentTyped< diff --git a/types/index.d.ts b/types/index.d.ts index f1446a1b..57a8a278 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -5,6 +5,7 @@ export { default as AspectRatio } from "./AspectRatio/AspectRatio"; export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb"; export { default as BreadcrumbItem } from "./Breadcrumb/BreadcrumbItem"; export { default as BreadcrumbSkeleton } from "./Breadcrumb/BreadcrumbSkeleton"; +export { default as Breakpoint } from "./Breakpoint/Breakpoint"; export { default as Button } from "./Button/Button"; export { default as ButtonSkeleton } from "./Button/ButtonSkeleton"; export { default as ButtonSet } from "./Button/ButtonSet"; @@ -92,12 +93,14 @@ export { default as Pagination } from "./Pagination/Pagination"; export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton"; export { default as PaginationNav } from "./PaginationNav/PaginationNav"; export { default as Popover } from "./Popover/Popover"; +export { default as ProgressBar } from "./ProgressBar/ProgressBar"; export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndicator"; export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton"; export { default as ProgressStep } from "./ProgressIndicator/ProgressStep"; export { default as RadioButton } from "./RadioButton/RadioButton"; export { default as RadioButtonSkeleton } from "./RadioButton/RadioButtonSkeleton"; export { default as RadioButtonGroup } from "./RadioButtonGroup/RadioButtonGroup"; +export { default as RecursiveList } from "./RecursiveList/RecursiveList"; export { default as Search } from "./Search/Search"; export { default as SearchSkeleton } from "./Search/SearchSkeleton"; export { default as Select } from "./Select/Select"; @@ -126,6 +129,7 @@ export { default as TextAreaSkeleton } from "./TextArea/TextAreaSkeleton"; export { default as TextInput } from "./TextInput/TextInput"; export { default as TextInputSkeleton } from "./TextInput/TextInputSkeleton"; export { default as PasswordInput } from "./TextInput/PasswordInput"; +export { default as Theme } from "./Theme/Theme"; export { default as Tile } from "./Tile/Tile"; export { default as ClickableTile } from "./Tile/ClickableTile"; export { default as ExpandableTile } from "./Tile/ExpandableTile"; @@ -142,6 +146,7 @@ export { default as Tooltip } from "./Tooltip/Tooltip"; export { default as TooltipFooter } from "./Tooltip/TooltipFooter"; export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition"; export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon"; +export { default as TreeView } from "./TreeView/TreeView"; export { default as Truncate } from "./Truncate/Truncate"; export { default as Header } from "./UIShell/GlobalHeader/Header"; export { default as HeaderAction } from "./UIShell/GlobalHeader/HeaderAction"; diff --git a/yarn.lock b/yarn.lock index cf319fe4..052ebdd4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -328,6 +328,14 @@ anymatch@~3.1.1: normalize-path "^3.0.0" picomatch "^2.0.4" +anymatch@~3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716" + integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg== + dependencies: + normalize-path "^3.0.0" + picomatch "^2.0.4" + array-union@^1.0.1: version "1.0.2" resolved "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39" @@ -453,20 +461,20 @@ caniuse-lite@^1.0.30001181: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2" integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw== -carbon-components@10.32.1: - version "10.32.1" - resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.1.tgz#064d4504daafafa379ee2fbc5b2997204fb2e5eb" - integrity sha512-m9Q9y1NSsXcLINSYmRmOOuxwvSNrXqC2FIN3ykg+WO3+WrmozbPsgFSyMs0gd/RUgNXP6edt8k0Op//oks01gA== +carbon-components@10.44.0: + version "10.44.0" + resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.44.0.tgz#80a68e71798c6f1272af41aed0d54da1bef62f9a" + integrity sha512-GUxr8vLWBieQtyTJprCUDMhPLbsZectQUs9JsQCFaBy5UYQqSSEw/9VgzH+5iiCp6wQIZCCg6NnTofGgoBBhYw== dependencies: "@carbon/telemetry" "0.0.0-alpha.6" flatpickr "4.6.1" lodash.debounce "^4.0.8" warning "^3.0.0" -carbon-icons-svelte@^10.27.0: - version "10.27.0" - resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.27.0.tgz#918e806d09e0e9cf61cf756ff0f9be49125ff9ea" - integrity sha512-e3l95wurOuEYMQxaDT2oYH322yRKgvTq5TDkzvylMGlCkA8erJH5lSwCM59VNFgPtptH4fIW9FlbQtpfp4iQ7Q== +carbon-icons-svelte@^10.36.0: + version "10.36.0" + resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.36.0.tgz#3f269f2c52520d14fcd42161a633afbb7c68b4bf" + integrity sha512-YlrHtjdRqMFiptNVpQ4M+gMvpYDoKQydBY5A82thAXIHk9JrbrVLzq6RgJugTijHT8yzMS1zXaw6YYhqL8Qzqw== chalk@^2.0.0, chalk@^2.4.1: version "2.4.2" @@ -485,20 +493,20 @@ chalk@^4.0.0, chalk@^4.1.0: ansi-styles "^4.1.0" supports-color "^7.1.0" -"chokidar@>=2.0.0 <4.0.0": - version "3.5.1" - resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a" - integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw== +"chokidar@>=3.0.0 <4.0.0": + version "3.5.2" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75" + integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ== dependencies: - anymatch "~3.1.1" + anymatch "~3.1.2" braces "~3.0.2" - glob-parent "~5.1.0" + glob-parent "~5.1.2" is-binary-path "~2.1.0" is-glob "~4.0.1" normalize-path "~3.0.0" - readdirp "~3.5.0" + readdirp "~3.6.0" optionalDependencies: - fsevents "~2.3.1" + fsevents "~2.3.2" chokidar@^3.4.1: version "3.4.3" @@ -540,11 +548,6 @@ cli-truncate@^2.1.0: slice-ansi "^3.0.0" string-width "^4.2.0" -clipboard-copy@3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.2.0.tgz#3c5b8651d3512dcfad295d77a9eb09e7fac8d5fb" - integrity sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ== - cliui@^7.0.2: version "7.0.4" resolved "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f" @@ -1026,6 +1029,11 @@ fsevents@~2.3.1: resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.1.tgz#b209ab14c61012636c8863507edf7fb68cc54e9f" integrity sha512-YR47Eg4hChJGAB1O3yEAOkGO+rlzutoICGqGo9EZ4lKWokzZRSyIW1QmTzqjtw8MJdj9srP869CuWw/hyzSiBw== +fsevents@~2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" + integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== + function-bind@^1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" @@ -1068,6 +1076,13 @@ glob-parent@^5.1.0, glob-parent@~5.1.0: dependencies: is-glob "^4.0.1" +glob-parent@~5.1.2: + version "5.1.2" + resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" + integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== + dependencies: + is-glob "^4.0.1" + glob@^7.0.3, glob@^7.1.6: version "7.1.6" resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" @@ -1985,6 +2000,13 @@ readdirp@~3.5.0: dependencies: picomatch "^2.2.1" +readdirp@~3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" + integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== + dependencies: + picomatch "^2.2.1" + require-directory@^2.1.1: version "2.1.1" resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42" @@ -2101,12 +2123,12 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1: resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== -sass@^1.32.6: - version "1.32.6" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.6.tgz#e3646c8325cd97ff75a8a15226007f3ccd221393" - integrity sha512-1bcDHDcSqeFtMr0JXI3xc/CXX6c4p0wHHivJdru8W7waM7a1WjKMm4m/Z5sY7CbVw4Whi2Chpcw6DFfSWwGLzQ== +sass@^1.42.1: + version "1.42.1" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.42.1.tgz#5ab17bebc1cb1881ad2e0c9a932c66ad64e441e2" + integrity sha512-/zvGoN8B7dspKc5mC6HlaygyCBRvnyzzgD5khiaCfglWztY99cYoiTUksVx11NlnemrcfH5CEaCpsUKoW0cQqg== dependencies: - chokidar ">=2.0.0 <4.0.0" + chokidar ">=3.0.0 <4.0.0" semver-compare@^1.0.0: version "1.0.0" @@ -2388,10 +2410,10 @@ supports-color@^7.0.0, supports-color@^7.1.0: dependencies: has-flag "^4.0.0" -sveld@^0.7.0: - version "0.7.0" - resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.7.0.tgz#379ecb92e42216cca11f7d7beecef6587c8f2b16" - integrity sha512-M022X3vjs6EVunPSC/oubO3br8vwcBZXYTdglGrydNCSTY5JewE+tY6Y+z8TaYeFt7PtEc6uVz1vzBIUqcrpyw== +sveld@^0.8.2: + version "0.8.2" + resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.8.2.tgz#979324cb058846ca686f563012e4615e35093094" + integrity sha512-oMv33rOc1jr4sV0gBozx4HJgDb6XAqelLgZn6ME4RgvFnK5mPWR/5On1LfMvFPXZVZMWac0id8VJVJMZVYPcNA== dependencies: "@rollup/plugin-node-resolve" "^11.0.1" acorn "^8.0.4" @@ -2402,6 +2424,8 @@ sveld@^0.7.0: rollup "^2.36.0" rollup-plugin-svelte "^7.0.0" svelte "^3.31.2" + svelte-preprocess "^4.7.3" + typescript "^4.1.3" svelte-check@^1.1.32: version "1.1.32" @@ -2427,11 +2451,26 @@ svelte-preprocess@^4.0.0: detect-indent "^6.0.0" strip-indent "^3.0.0" -svelte@^3.31.2, svelte@^3.32.1: +svelte-preprocess@^4.7.3: + version "4.7.4" + resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.7.4.tgz#e4d5208ab25c2aaaf19e837f7d7bbf7930e61d2b" + integrity sha512-mDAmaltQl6e5zU2VEtoWEf7eLTfuOTGr9zt+BpA3AGHo8MIhKiNSPE9OLTCTOMgj0vj/uL9QBbaNmpG4G1CgIA== + dependencies: + "@types/pug" "^2.0.4" + "@types/sass" "^1.16.0" + detect-indent "^6.0.0" + strip-indent "^3.0.0" + +svelte@^3.31.2: version "3.32.1" resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.32.1.tgz#c4b6e35517d0ed77e652cc8964ef660afa2f70f3" integrity sha512-j1KmD2ZOU0RGq1/STDXjwfh0/eJ/Deh2NXyuz1bpR9eOcz9yImn4CGxXdbSAN7cMTm9a7IyPUIbuBCzu/pXK0g== +svelte@^3.40.1: + version "3.40.1" + resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.40.1.tgz#0c1fa443c812f042ce5ccd8d3bec1654a612c259" + integrity sha512-IreCwsCD5yoKlXCDXCyHZ0mh1wNwm3/5QD+nVNBzSWug5dUiWcah/8QWnDcC3IYbJbn0ZRT04b8y4ITMtr1bNQ== + terser@^5.0.0: version "5.3.0" resolved "https://registry.npmjs.org/terser/-/terser-5.3.0.tgz#c481f4afecdcc182d5e2bdd2ff2dc61555161e81"