@elliemae/ds-app-picker 2.0.0-rc.10 → 2.0.0-rc.14

package/cjs/DSAppPicker.js

@@ -44,7 +44,7 @@ const DSAppPicker = _ref => {
   const wrapperRef = react.useRef(null);
   const defaultTriggerRef = react.useRef(null);
   react.useEffect(() => {
-    if (actionRef) {
+    if (actionRef && actionRef.current) {
       actionRef.current.focusToIndex = index => {
         if (wrapperRef.current) {
           const parent = wrapperRef.current;

package/cjs/styles.js

@@ -29,14 +29,12 @@ const StyledTitle = dsSystem.styled('p', {
 const StyledChipLabel = dsSystem.styled('p', {
   name: 'DS-AppPicker',
   slot: 'chipLabel'
-})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  font-size: 0.8461rem;\n  font-weight: 600;\n  word-wrap: break-word;\n  margin: 4px 0;\n  line-height: 12px;\n  text-overflow: ellipsis;\n"])));
-
-const styledChipSelectedCss = props => dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n  color: ", ";\n  background-color: ", ";\n  position: relative;\n\n  .app-picker__icon {\n    fill: ", ";\n  }\n\n  &:focus {\n    border: 2px solid transparent;\n    &::after {\n      border: 2px solid ", ";\n    }\n  }\n\n  &::after {\n    position: absolute;\n    content: '';\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n    border: 1px solid ", ";\n    border-radius: 2px;\n  }\n"])), props.theme.colors.brand[800], props.theme.colors.brand[200], props.theme.colors.brand[800], props.theme.colors.brand[800], props.theme.colors.brand[600]);
-
+})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  font-size: 0.8461rem;\n  font-weight: 600;\n  word-wrap: break-word;\n  margin: 4px 0;\n  line-height: 14px;\n  text-overflow: ellipsis;\n  max-width: 68px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n"])));
+const styledChipSelectedCss = dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n  color: ", ";\n  background-color: ", ";\n  position: relative;\n\n  .app-picker__icon {\n    fill: ", ";\n  }\n\n  &::after {\n    position: absolute;\n    content: ' ';\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: 2px;\n  }\n\n  &:focus {\n    border: 2px solid transparent;\n    &::after {\n      border: 2px solid ", ";\n    }\n  }\n"])), props => props.theme.colors.brand[800], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => props.theme.colors.brand[600], props => props.theme.colors.brand[800]);
 const StyledChip = dsSystem.styled('button', {
   name: 'DS-AppPicker',
   slot: 'chip'
-})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  border-radius: 2%;\n  padding: 8px 0 4px 0;\n  margin: 4px;\n  height: 68px;\n  width: 68px;\n  line-height: 1px;\n  background-color: #fff;\n  color: ", ";\n  cursor: pointer;\n  border: 2px solid transparent;\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  &:focus {\n    outline: none;\n    border: 2px solid ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n\n    .app-picker__icon {\n      fill: ", ";\n    }\n\n    &:focus,\n    &:hover {\n      background-color: #fff;\n      cursor: not-allowed;\n      border: 2px solid transparent;\n\n      ", " {\n        color: ", ";\n      }\n    }\n\n    &:hover .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  ", "\n"])), props => props.theme.colors.brand[600], props => props.theme.colors.brand[800], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => props.theme.colors.brand[800], props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], StyledChipLabel, props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], props => !props.selected ? '' : styledChipSelectedCss(props));
+})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  border-radius: 2%;\n  padding: 8px 0 4px 0;\n  margin: 4px;\n  height: 68px;\n  width: 68px;\n  line-height: 1px;\n  background-color: #fff;\n  color: ", ";\n  cursor: pointer;\n  border: 2px solid transparent;\n  overflow: hidden;\n\n  & .app-picker__icon {\n    fill: ", ";\n  }\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  &:focus {\n    outline: none;\n    border: 2px solid ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n\n    .app-picker__icon {\n      fill: ", ";\n    }\n\n    &:focus,\n    &:hover {\n      background-color: #fff;\n      cursor: not-allowed;\n      border: 2px solid transparent;\n\n      ", " {\n        color: ", ";\n      }\n    }\n\n    &:hover .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  ", "\n"])), props => props.theme.colors.brand[600], props => props.theme.colors.brand[600], props => props.theme.colors.brand[800], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => props.theme.colors.brand[800], props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], StyledChipLabel, props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], props => !props.selected ? '' : styledChipSelectedCss);
 const StyledSeparator = dsSystem.styled('hr', {
   name: 'DS-AppPicker',
   slot: 'separator'

package/esm/DSAppPicker.js

@@ -34,7 +34,7 @@ const DSAppPicker = _ref => {
   const wrapperRef = useRef(null);
   const defaultTriggerRef = useRef(null);
   useEffect(() => {
-    if (actionRef) {
+    if (actionRef && actionRef.current) {
       actionRef.current.focusToIndex = index => {
         if (wrapperRef.current) {
           const parent = wrapperRef.current;

package/esm/styles.js

@@ -21,14 +21,12 @@ const StyledTitle = styled('p', {
 const StyledChipLabel = styled('p', {
   name: 'DS-AppPicker',
   slot: 'chipLabel'
-})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: 0.8461rem;\n  font-weight: 600;\n  word-wrap: break-word;\n  margin: 4px 0;\n  line-height: 12px;\n  text-overflow: ellipsis;\n"])));
-
-const styledChipSelectedCss = props => css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n  position: relative;\n\n  .app-picker__icon {\n    fill: ", ";\n  }\n\n  &:focus {\n    border: 2px solid transparent;\n    &::after {\n      border: 2px solid ", ";\n    }\n  }\n\n  &::after {\n    position: absolute;\n    content: '';\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n    border: 1px solid ", ";\n    border-radius: 2px;\n  }\n"])), props.theme.colors.brand[800], props.theme.colors.brand[200], props.theme.colors.brand[800], props.theme.colors.brand[800], props.theme.colors.brand[600]);
-
+})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: 0.8461rem;\n  font-weight: 600;\n  word-wrap: break-word;\n  margin: 4px 0;\n  line-height: 14px;\n  text-overflow: ellipsis;\n  max-width: 68px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n"])));
+const styledChipSelectedCss = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n  position: relative;\n\n  .app-picker__icon {\n    fill: ", ";\n  }\n\n  &::after {\n    position: absolute;\n    content: ' ';\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: 2px;\n  }\n\n  &:focus {\n    border: 2px solid transparent;\n    &::after {\n      border: 2px solid ", ";\n    }\n  }\n"])), props => props.theme.colors.brand[800], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => props.theme.colors.brand[600], props => props.theme.colors.brand[800]);
 const StyledChip = styled('button', {
   name: 'DS-AppPicker',
   slot: 'chip'
-})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  border-radius: 2%;\n  padding: 8px 0 4px 0;\n  margin: 4px;\n  height: 68px;\n  width: 68px;\n  line-height: 1px;\n  background-color: #fff;\n  color: ", ";\n  cursor: pointer;\n  border: 2px solid transparent;\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  &:focus {\n    outline: none;\n    border: 2px solid ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n\n    .app-picker__icon {\n      fill: ", ";\n    }\n\n    &:focus,\n    &:hover {\n      background-color: #fff;\n      cursor: not-allowed;\n      border: 2px solid transparent;\n\n      ", " {\n        color: ", ";\n      }\n    }\n\n    &:hover .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  ", "\n"])), props => props.theme.colors.brand[600], props => props.theme.colors.brand[800], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => props.theme.colors.brand[800], props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], StyledChipLabel, props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], props => !props.selected ? '' : styledChipSelectedCss(props));
+})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  border-radius: 2%;\n  padding: 8px 0 4px 0;\n  margin: 4px;\n  height: 68px;\n  width: 68px;\n  line-height: 1px;\n  background-color: #fff;\n  color: ", ";\n  cursor: pointer;\n  border: 2px solid transparent;\n  overflow: hidden;\n\n  & .app-picker__icon {\n    fill: ", ";\n  }\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  &:focus {\n    outline: none;\n    border: 2px solid ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n\n    .app-picker__icon {\n      fill: ", ";\n    }\n\n    &:focus,\n    &:hover {\n      background-color: #fff;\n      cursor: not-allowed;\n      border: 2px solid transparent;\n\n      ", " {\n        color: ", ";\n      }\n    }\n\n    &:hover .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  ", "\n"])), props => props.theme.colors.brand[600], props => props.theme.colors.brand[600], props => props.theme.colors.brand[800], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => props.theme.colors.brand[800], props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], StyledChipLabel, props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], props => !props.selected ? '' : styledChipSelectedCss);
 const StyledSeparator = styled('hr', {
   name: 'DS-AppPicker',
   slot: 'separator'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-app-picker",
-  "version": "2.0.0-rc.10",
+  "version": "2.0.0-rc.14",
   "license": "MIT",
   "description": "ICE MT - Dimsum - App Picker",
   "module": "./esm/index.js",
@@ -56,21 +56,23 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.0-rc.10",
-    "@elliemae/ds-classnames": "2.0.0-rc.10",
-    "@elliemae/ds-icons": "2.0.0-rc.10",
-    "@elliemae/ds-popover": "2.0.0-rc.10",
-    "@elliemae/ds-utilities": "2.0.0-rc.10",
+    "@elliemae/ds-button": "2.0.0-rc.14",
+    "@elliemae/ds-icons": "2.0.0-rc.14",
+    "@elliemae/ds-popover": "2.0.0-rc.14",
+    "@elliemae/ds-system": "2.0.0-rc.14",
+    "@elliemae/ds-utilities": "2.0.0-rc.14",
     "react-desc": "^4.1.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "~5.15.0",
-    "@testing-library/react": "~12.1.2"
+    "@testing-library/react": "~12.1.2",
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/styles.d.ts

@@ -1,7 +1,9 @@
-export declare const StyledWrapper: any;
-export declare const StyledGrid: any;
-export declare const StyledRow: any;
-export declare const StyledTitle: any;
-export declare const StyledChipLabel: any;
-export declare const StyledChip: any;
-export declare const StyledSeparator: any;
+export declare const StyledWrapper: import("styled-components").StyledComponent<"ul", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledGrid: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledRow: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledTitle: import("styled-components").StyledComponent<"p", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledChipLabel: import("styled-components").StyledComponent<"p", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
+export declare const StyledChip: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system/types/styled/types").Theme, {
+    selected: boolean | undefined;
+}, never>;
+export declare const StyledSeparator: import("styled-components").StyledComponent<"hr", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;

package/types/types/AppPickerTypes.d.ts

@@ -16,16 +16,16 @@ export interface AppPickerPropsType {
     sectionTitle: string;
     customSectionTitle: string;
     icon: SvgIconType;
-    onKeyDown?: (e: KeyboardEvent) => void;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
     actionRef?: React.RefObject<{
         focusToIndex: (index: number) => void;
     }>;
     onClick?: (e: MouseEvent) => void;
-    onClickOutside?: (e: MouseEvent) => void;
-    renderTrigger?: JSX.Element;
+    onClickOutside?: (e: React.MouseEvent) => void;
+    renderTrigger?: React.ComponentType<any>;
     isOpen?: boolean;
     onClose?: () => void;
-    triggerRef: React.RefObject<HTMLElement>;
+    triggerRef?: React.RefObject<HTMLButtonElement>;
 }
 export interface AppPickerImplProps {
     apps: AppItemType[];
@@ -34,7 +34,7 @@ export interface AppPickerImplProps {
     customSectionTitle: string;
     close?: () => void;
     onKeyDown: (e: KeyboardEvent) => void;
-    wrapperRef: React.RefObject<HTMLDivElement>;
+    wrapperRef: React.RefObject<HTMLUListElement>;
     triggerRef: React.RefObject<HTMLElement>;
 }
 export declare type DSAppPickerImplType = React.ComponentType<AppPickerImplProps>;