@loadsmart/loadsmart-ui 7.3.1 → 7.3.3

package/dist/utils/toolset/highlightMatch.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * A function that wraps a match into `mark` element to be highlighted.
  * @example

package/package.json

@@ -1,186 +1,191 @@
 {
-	"name": "@loadsmart/loadsmart-ui",
-	"version": "7.3.1",
-	"description": "Miranda UI, a React UI library",
-	"main": "dist",
-	"files": [
-		"src",
-		"dist",
-		"README.md"
-	],
-	"types": "dist/index.d.ts",
-	"scripts": {
-		"start": "yarn dev",
-		"dev": "npm-run-all --parallel watch-tailwind storybook",
-		"lint": "eslint --ext .js,.ts,.tsx src/",
-		"test": "TZ=UTC jest --clearMocks",
-		"test-watch": "yarn test --watch",
-		"storybook": "storybook dev -p 6006",
-		"build": "rollup -c --environment BUILD:prod",
-		"watch-tailwind": "postcss ./tailwind.css -o ./.storybook/globals.css --watch",
-		"docs:build": "storybook build -o ./docs",
-		"docs:deploy": "gh-pages -d docs -m \"chore(docs): update gh-pages [skip ci]\"",
-		"release": "semantic-release",
-		"prepare": "husky install"
-	},
-	"storybook-deployer": {
-		"commitMessage": "chore(docs): deploy storybook to GitHub pages [skip ci]"
-	},
-	"lint-staged": {
-		"src/**/*.{js,ts,jsx,tsx,json}": [
-			"eslint --fix",
-			"prettier --write"
-		],
-		"src/{common,components,styles}/**/*.{js,ts,jsx,tsx}": [
-			"eslint --fix",
-			"prettier --write",
-			"stylelint --fix"
-		]
-	},
-	"jest-junit": {
-		"addFileAttribute": "true"
-	},
-	"devDependencies": {
-		"@babel/core": "^7.20.12",
-		"@babel/plugin-proposal-class-properties": "^7.18.6",
-		"@babel/plugin-proposal-private-methods": "^7.18.6",
-		"@babel/plugin-proposal-private-property-in-object": "^7.21.0",
-		"@babel/preset-env": "^7.20.2",
-		"@babel/preset-react": "^7.18.6",
-		"@babel/preset-typescript": "^7.18.6",
-		"@commitlint/cli": "^16.0.2",
-		"@commitlint/config-conventional": "^16.0.0",
-		"@loadsmart/miranda-tokens": "^2.2.1",
-		"@loadsmart/stylelint-config": "^0.0.3",
-		"@rollup/plugin-babel": "^5.3.0",
-		"@rollup/plugin-commonjs": "^19.0.0",
-		"@rollup/plugin-json": "^4.1.0",
-		"@rollup/plugin-node-resolve": "^13.0.0",
-		"@semantic-release/git": "^9.0.0",
-		"@storybook/addon-a11y": "^7.0.17",
-		"@storybook/addon-essentials": "^7.0.17",
-		"@storybook/addon-links": "^7.0.17",
-		"@storybook/addons": "^7.0.17",
-		"@storybook/react": "^7.0.17",
-		"@storybook/react-webpack5": "^7.0.17",
-		"@storybook/theming": "^7.0.17",
-		"@svgr/rollup": "^6.5.1",
-		"@svgr/webpack": "^8.0.1",
-		"@tailwindcss/postcss7-compat": "^2.1.2",
-		"@testing-library/dom": "^8.20.0",
-		"@testing-library/jest-dom": "^5.16.5",
-		"@testing-library/react": "^11.2.7",
-		"@testing-library/react-hooks": "^5.1.3",
-		"@testing-library/user-event": "^13.5.0",
-		"@types/chance": "^1.1.1",
-		"@types/jest": "^27.5.2",
-		"@types/lodash.debounce": "^4.0.6",
-		"@types/lodash.flatten": "^4.4.6",
-		"@types/lodash.get": "^4.4.6",
-		"@types/lodash.isempty": "^4.4.6",
-		"@types/lodash.omit": "^4.5.6",
-		"@types/lodash.range": "^3.2.6",
-		"@types/mdx": "^2.0.2",
-		"@types/node": "^18.11.18",
-		"@types/react": "^17.0.59",
-		"@types/react-dom": "^17.0.20",
-		"@types/react-test-renderer": "^17.0.1",
-		"@types/styled-components": "^5.1.26",
-		"@typescript-eslint/eslint-plugin": "^4.22.1",
-		"@typescript-eslint/parser": "^4.22.1",
-		"@zerollup/ts-transform-paths": "^1.7.18",
-		"autoprefixer": "^9.8.8",
-		"babel-jest": "^27.5.1",
-		"babel-loader": "8.2.2",
-		"babel-plugin-react-remove-properties": "^0.3.0",
-		"babel-plugin-styled-components": "^1.12.0",
-		"babel-plugin-transform-inline-environment-variables": "^0.4.3",
-		"babel-preset-react-app": "^10.0.0",
-		"chance": "^1.1.8",
-		"commitizen": "^4.2.4",
-		"cross-env": "^7.0.3",
-		"cz-conventional-changelog": "^3.3.0",
-		"eslint": "^7.26.0",
-		"eslint-config-prettier": "^8.3.0",
-		"eslint-plugin-jest-dom": "^3.8.1",
-		"eslint-plugin-jsx-a11y": "^6.4.1",
-		"eslint-plugin-prettier": "^3.4.0",
-		"eslint-plugin-react": "^7.23.2",
-		"eslint-plugin-react-hooks": "^4.2.0",
-		"eslint-plugin-storybook": "^0.6.12",
-		"eslint-plugin-testing-library": "^5.9.1",
-		"gh-pages": "^5.0.0",
-		"husky": "7.0.4",
-		"identity-obj-proxy": "^3.0.0",
-		"jest": "^27.5.1",
-		"jest-junit": "^16.0.0",
-		"jest-transformer-svg": "^1.0.2",
-		"lint-staged": "^11.0.0",
-		"npm-run-all": "^4.1.5",
-		"postcss": "^7.0.39",
-		"postcss-cli": "^7.1.2",
-		"prettier": "^2.8.4",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2",
-		"react-is": "^17.0.2",
-		"react-syntax-highlighter": "^15.5.0",
-		"rollup": "^2.79.1",
-		"rollup-plugin-delete": "^2.0.0",
-		"rollup-plugin-peer-deps-external": "^2.2.4",
-		"rollup-plugin-terser": "^7.0.2",
-		"rollup-plugin-typescript2": "^0.34.1",
-		"rollup-plugin-visualizer": "^5.5.2",
-		"semantic-release": "^17.4.2",
-		"storybook": "^7.0.17",
-		"styled-components": "^5.3.0",
-		"stylelint": "^13.13.1",
-		"stylelint-config-prettier": "^8.0.2",
-		"stylelint-config-rational-order": "^0.1.2",
-		"stylelint-config-recommended": "^5.0.0",
-		"stylelint-no-unsupported-browser-features": "^5.0.1",
-		"stylelint-order": "^4.1.0",
-		"tailwindcss": "npm:@tailwindcss/postcss7-compat",
-		"ts-jest": "^27.1.5",
-		"ts-node": "^10.9.1",
-		"ts-toolbelt": "^9.6.0",
-		"ttypescript": "^1.5.13",
-		"typescript": "4.4.4",
-		"typescript-plugin-styled-components": "^1.5.0"
-	},
-	"peerDependencies": {
-		"@loadsmart/miranda-tokens": ">=1.3.0",
-		"@testing-library/react": ">=11.2.6",
-		"react": ">=16.8.0",
-		"react-dom": ">=16.8.0",
-		"styled-components": ">=5.3.0"
-	},
-	"dependencies": {
-		"@floating-ui/react-dom": "^2.0.0",
-		"@loadsmart/utils-function": "0.3.1",
-		"@loadsmart/utils-object": "0.3.1",
-		"@loadsmart/utils-string": "0.3.1",
-		"clsx": "1.1.1",
-		"lodash.debounce": "4.0.8",
-		"lodash.flatten": "4.4.0",
-		"lodash.get": "4.4.2",
-		"lodash.isempty": "4.4.0",
-		"lodash.omit": "4.5.0",
-		"lodash.range": "3.2.0"
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/loadsmart/miranda.git"
-	},
-	"license": "MIT",
-	"publishConfig": {
-		"access": "public"
-	},
-	"config": {
-		"commitizen": {
-			"path": "./node_modules/cz-conventional-changelog"
-		}
-	},
-	"resolutions": {
-		"@stylelint/postcss-css-in-js": "0.37.2"
-	}
+  "name": "@loadsmart/loadsmart-ui",
+  "version": "7.3.3",
+  "description": "Miranda UI, a React UI library",
+  "main": "dist",
+  "files": [
+    "src",
+    "dist",
+    "README.md"
+  ],
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "start": "yarn dev",
+    "dev": "npm-run-all --parallel watch-tailwind storybook",
+    "lint": "eslint --ext .js,.ts,.tsx src/",
+    "test": "TZ=UTC jest --clearMocks",
+    "test-watch": "yarn test --watch",
+    "storybook": "storybook dev -p 6006",
+    "build": "rollup -c --environment BUILD:prod",
+    "watch-tailwind": "postcss ./tailwind.css -o ./.storybook/globals.css --watch",
+    "docs:build": "storybook build -o ./docs",
+    "docs:deploy": "gh-pages -d docs -m \"chore(docs): update gh-pages [skip ci]\"",
+    "release": "semantic-release",
+    "prepare": "husky install"
+  },
+  "storybook-deployer": {
+    "commitMessage": "chore(docs): deploy storybook to GitHub pages [skip ci]"
+  },
+  "lint-staged": {
+    "src/**/*.{js,ts,jsx,tsx,json}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "src/{common,components,styles}/**/*.{js,ts,jsx,tsx}": [
+      "eslint --fix",
+      "prettier --write",
+      "stylelint --fix"
+    ]
+  },
+  "jest-junit": {
+    "addFileAttribute": "true"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@commitlint/cli": "^16.0.2",
+    "@commitlint/config-conventional": "^16.0.0",
+    "@loadsmart/miranda-tokens": "^2.2.1",
+    "@loadsmart/stylelint-config": "^0.0.3",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@semantic-release/git": "^9.0.0",
+    "@storybook/addon-a11y": "^7.0.17",
+    "@storybook/addon-essentials": "^7.0.17",
+    "@storybook/addon-links": "^7.0.17",
+    "@storybook/addons": "^7.0.17",
+    "@storybook/react": "^7.0.17",
+    "@storybook/react-webpack5": "^7.0.17",
+    "@storybook/theming": "^7.0.17",
+    "@svgr/rollup": "^6.5.1",
+    "@svgr/webpack": "^8.0.1",
+    "@tailwindcss/postcss7-compat": "^2.1.2",
+    "@testing-library/dom": "^8.20.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/react-hooks": "^5.1.3",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/chance": "^1.1.1",
+    "@types/jest": "^27.5.2",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/lodash.flatten": "^4.4.6",
+    "@types/lodash.get": "^4.4.6",
+    "@types/lodash.isempty": "^4.4.6",
+    "@types/lodash.omit": "^4.5.6",
+    "@types/lodash.range": "^3.2.6",
+    "@types/mdx": "^2.0.2",
+    "@types/node": "^18.11.18",
+    "@types/react": "^17.0.83",
+    "@types/react-dom": "^17.0.25",
+    "@types/react-test-renderer": "^17.0.1",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^4.22.1",
+    "@typescript-eslint/parser": "^4.22.1",
+    "@zerollup/ts-transform-paths": "^1.7.18",
+    "autoprefixer": "^9.8.8",
+    "babel-jest": "^27.5.1",
+    "babel-loader": "8.2.2",
+    "babel-plugin-react-remove-properties": "^0.3.0",
+    "babel-plugin-styled-components": "^1.12.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
+    "babel-preset-react-app": "^10.0.0",
+    "chance": "^1.1.8",
+    "commitizen": "^4.2.4",
+    "cross-env": "^7.0.3",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^7.26.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-jest-dom": "^3.8.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-testing-library": "^5.9.1",
+    "gh-pages": "^5.0.0",
+    "husky": "7.0.4",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.5.1",
+    "jest-junit": "^16.0.0",
+    "jest-transformer-svg": "^1.0.2",
+    "lint-staged": "^11.0.0",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^7.0.39",
+    "postcss-cli": "^7.1.2",
+    "prettier": "^2.8.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "react-syntax-highlighter": "^15.5.0",
+    "rollup": "^2.79.1",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "rollup-plugin-visualizer": "^5.5.2",
+    "semantic-release": "^17.4.2",
+    "storybook": "^7.0.17",
+    "styled-components": "^5.3.11",
+    "stylelint": "^13.13.1",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-recommended": "^5.0.0",
+    "stylelint-no-unsupported-browser-features": "^5.0.1",
+    "stylelint-order": "^4.1.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+    "ts-jest": "^27.1.5",
+    "ts-node": "^10.9.1",
+    "ts-toolbelt": "^9.6.0",
+    "ttypescript": "^1.5.13",
+    "typescript": "4.4.4",
+    "typescript-plugin-styled-components": "^1.5.0"
+  },
+  "peerDependencies": {
+    "@loadsmart/miranda-tokens": ">=1.3.0",
+    "@testing-library/react": ">=11.2.6",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "styled-components": ">=5.3.0"
+  },
+  "dependencies": {
+    "@floating-ui/react-dom": "^2.0.0",
+    "@loadsmart/utils-function": "0.3.1",
+    "@loadsmart/utils-object": "0.3.1",
+    "@loadsmart/utils-string": "0.3.1",
+    "clsx": "1.1.1",
+    "lodash.debounce": "4.0.8",
+    "lodash.flatten": "4.4.0",
+    "lodash.get": "4.4.2",
+    "lodash.isempty": "4.4.0",
+    "lodash.omit": "4.5.0",
+    "lodash.range": "3.2.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/loadsmart/miranda.git"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "resolutions": {
+    "@stylelint/postcss-css-in-js": "0.37.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "@types/react": "17.0.83",
+    "@types/react-dom": "17.0.25",
+    "react-is": "17.0.2"
+  }
 }

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -80,7 +80,7 @@ export const WithSections: Story<DropdownStoryProps> = (args) => {
     <div className="flex flex-col">
       <Dropdown {...args}>
         <Dropdown.Trigger outlined={args.outlined}>Sections</Dropdown.Trigger>
-        <Dropdown.Menu align={args.align}>
+        <Dropdown.Menu>
           <Dropdown.Section header="My profile">
             {PROFILE_ACTIONS.map(({ label, value }) => (
               <Dropdown.Item
@@ -128,7 +128,6 @@ export const Extended: Story<DropdownStoryProps> = (args) => {
       <Dropdown {...args}>
         <Dropdown.Trigger outlined={args.outlined}>With Header &amp; Footer</Dropdown.Trigger>
         <Dropdown.Menu
-          align={args.align}
           header={<p className="px-2">Header</p>}
           footer={<p className="px-2">A cool footer</p>}
         >

package/src/components/IconFactory/IconFactory.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, ComponentType } from 'react'
 import styled from 'styled-components'
 
 import transition from 'styles/transition'
@@ -50,7 +50,7 @@ export function UnknownIcon(): JSX.Element {
   return <span aria-label="Unknown icon">&#9785;</span>
 }
 
-function IconFactory(map: IconMapping): (props: IconProps<typeof map>) => JSX.Element {
+function IconFactory(map: IconMapping): ComponentType<IconProps<typeof map>> {
   function getIcon(name: keyof typeof map): ReactNode | null {
     // eslint-disable-next-line no-param-reassign
     name = String(name || '').toLowerCase()

package/src/components/Select/Select.constants.ts

@@ -4,9 +4,9 @@ import type { SelectAdapter } from './Select.types'
 
 export const GenericAdapter: SelectAdapter<unknown> = {
   getKey(o): string {
-    return get(o, 'value') as string
+    return get(o, 'value')!
   },
   getLabel(o): string {
-    return get(o, 'label') as string
+    return get(o, 'label')!
   },
 }

package/src/components/Steps/useSteps.ts

@@ -115,7 +115,7 @@ function useSteps({ steps, current: currentProp }: useStepsProps): [State, Dispa
   // TODO: gather step info to feed Steps component
   function init(steps: Array<Step>, current?: number | string): State {
     return {
-      current: current || (get(steps, '0.id') as number | string),
+      current: current || get(steps, '0.id')!,
       steps,
     }
   }

package/src/components/Tag/Tag.tsx

@@ -315,7 +315,7 @@ const StyledCloseButton = styled.button<WithSizeProps & WithVariantProps>`
       'tag-warning-background--focus': whenProps({ variant: 'warning' }),
       'tag-danger-background--focus': whenProps({ variant: 'danger' }),
     })};
-    box-shadow: ${token('tag-outline')};
+    box-shadow: ${token('tag-box-shadow')};
   }
 `
 

package/src/hooks/useSelectable/SelectableStrategy.ts

@@ -14,7 +14,7 @@ export type SelectableStrategyContext<T extends Selectable> = {
 
 const GenericAdapter: SelectableAdapter<unknown> = {
   getKey(o): string {
-    return get(o, 'value') as string
+    return get(o, 'value')!
   },
 }