@onewelcome/react-lib-components 1.2.0 → 1.4.0

package/src/index.ts

@@ -43,6 +43,7 @@ export {
 
 /* Utils */
 export { useRepeater } from "./hooks/useRepeater";
+export { useDebouncedCallback } from "./hooks/useDebouncedCallback";
 export { generateID, debounce, throttle } from "./util/helper";
 
 /* Notifications */

package/src/mixins.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "./readyclasses.module.scss";
+@use "./readyclasses.module.scss";
 
 @mixin button($variant: "text", $type: "default") {
   $disabledSelector: if($type == "link", ".disabled", ":disabled");
@@ -84,7 +84,7 @@
     color: $color;
   }
 
-  @include focusOutline(var(--color-focus));
+  @include readyclasses.focusOutline(var(--color-focus));
 
   &:hover:not(.disabled),
   &:focus:not(.disabled) {

package/src/util/helper.test.tsx

@@ -123,34 +123,6 @@ describe("debounce function", () => {
 });
 
 describe("throttling works", () => {
-  it("throttles the function", async () => {
-    const throttledFunction = jest.fn();
-
-    window.addEventListener("resize", throttle(throttledFunction, 1));
-
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-
-    expect(throttledFunction).not.toHaveBeenCalledTimes(1);
-    expect(throttledFunction).not.toHaveBeenCalledTimes(10);
-  });
-
   it("Works in a react component as well, it should only fire the exampleFunction once.", async () => {
     const ExampleComponent = ({
       throttledFunction

package/dist/Tabs/TabPanel.d.ts

@@ -1,8 +0,0 @@
-import React, { ComponentPropsWithRef } from "react";
-export interface Props extends ComponentPropsWithRef<"div"> {
-    children: React.ReactNode;
-    tabId: string;
-    tabPanelId: string;
-    selected?: boolean;
-}
-export declare const TabPanel: React.ForwardRefExoticComponent<Pick<Props, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tabId" | "tabPanelId" | "selected"> & React.RefAttributes<HTMLDivElement>>;

package/src/Tabs/TabPanel.test.tsx

@@ -1,92 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React from "react";
-import { TabPanel, Props } from "./TabPanel";
-import { render } from "@testing-library/react";
-
-const defaultParams: Props = {
-  tabId: "fakeTabId",
-  tabPanelId: "fakeTabPanelId",
-  children: []
-};
-
-const createTabPanel = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <TabPanel {...parameters} data-testid="tabpanel">
-      tabpanel content
-    </TabPanel>
-  );
-  const tabpanel = queries.getByTestId("tabpanel");
-
-  return {
-    ...queries,
-    tabpanel
-  };
-};
-
-describe("TabPanel should render", () => {
-  it("renders without crashing", () => {
-    const { tabpanel } = createTabPanel();
-
-    expect(tabpanel).toBeTruthy();
-
-    expect(tabpanel).toHaveAttribute("aria-hidden", "true");
-    expect(tabpanel).toHaveAttribute("hidden");
-  });
-
-  it("should be visible when prop selected is passed", () => {
-    const { tabpanel } = createTabPanel(defaultParams => ({
-      ...defaultParams,
-      selected: true
-    }));
-
-    expect(tabpanel).toHaveClass("selected");
-    expect(tabpanel).toHaveAttribute("aria-hidden", "false");
-    expect(tabpanel).not.toHaveAttribute("hidden");
-  });
-
-  it("should set id when prop tabPanelId is passed", () => {
-    const { tabpanel } = createTabPanel(defaultParams => ({
-      ...defaultParams,
-      tabPanelId: "fakeId"
-    }));
-
-    expect(tabpanel).toHaveAttribute("id", "fakeId");
-  });
-
-  it("should set accessibility attributes when prop tabId is passed", () => {
-    const { tabpanel } = createTabPanel(defaultParams => ({
-      ...defaultParams,
-      tabId: "fakeId"
-    }));
-
-    expect(tabpanel).toHaveAttribute("aria-labelledby", "fakeId");
-  });
-
-  it("should set class when prop className is passed", () => {
-    const { tabpanel } = createTabPanel(defaultParams => ({
-      ...defaultParams,
-      className: "customclass"
-    }));
-
-    expect(tabpanel).toHaveClass("customclass");
-  });
-});

package/src/Tabs/TabPanel.tsx

@@ -1,43 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { ComponentPropsWithRef } from "react";
-import classes from "./TabPanel.module.scss";
-
-export interface Props extends ComponentPropsWithRef<"div"> {
-  children: React.ReactNode;
-  tabId: string;
-  tabPanelId: string;
-  selected?: boolean;
-}
-
-export const TabPanel = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, tabId, tabPanelId, selected = false, className, ...rest }: Props, ref) => (
-    <div
-      {...rest}
-      ref={ref}
-      aria-labelledby={tabId}
-      className={`${classes["tabpanel"]} ${selected ? classes["selected"] : ""} ${className ?? ""}`}
-      id={tabPanelId}
-      role="tabpanel"
-      tabIndex={0}
-      hidden={!selected || undefined}
-      aria-hidden={!selected}
-    >
-      {children}
-    </div>
-  )
-);